JavaScript 用于css和html的Javascript动态效果库

Posted 2021-05-19

/**
 * @author alvaro isorna
 * @projectDescription dynamic effects library for css & html
 * @id dfx.js
 * @extends prototype.js
 * @use add a "dfx" className to your tags, in order to apply the dynamic effects
 */

Event.observe(window, 'load', function(e){
	//	dfx:hover
	$A(document.getElementsByClassName('dfx:hover')).each(function(poElement){
		Event.observe(poElement, 'mouseover', function(e){
			Element.addClassName(poElement, 'hover');
		}, false);
		Event.observe(poElement, 'mouseout', function(e){
			Element.removeClassName(poElement, 'hover');
		}, false);
	});
	//	add any other "dfx" effects (:focus, :first, ...)
	//	dfx:quotes
	$A(document.getElementsByClassName('dfx:quotes')).each(function(poElement){
		var cHTML_OPEN_QUOTE = '<span class="open-quote">“</span>';
		var cHTML_CLOSE_QUOTE = '<span class="close-quote">”</span>';
		
		new Insertion.Top(poElement, cHTML_OPEN_QUOTE);
		new Insertion.Bottom(poElement, cHTML_CLOSE_QUOTE);
	});
}, false);