glow.js

这个插件可以很容易的实现网页元素的发光或者阴影效果！

var default_glow = 
{
	swf:'http://www.longbill.cn/js/glow.swf',   	//glow swf file url
	alpha:1,							//glow alpha ( from 0 to 1)
	strength:5,						//glow strength
	color:'#ffffff',						//glow color
	border_width:10,					//glow border width and height
	left:0,							//glow x shifting (px)
	top:0								//glow y shifting (px)
};


function flash(data)
{
	if (!data.alpha || data.alpha>1) data.alpha = default_glow.alpha;
	if (!data.color || !data.color.match(/^#[a-zA-Z0-9]{6}$/))
	{
		alert('color is invalid:'+data.color);
		data.color  = default_glow.color;
	}
	data.color = data.color.replace('#','');
	var html = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="{swf_id}" '
		+'width="{swf_width}" height="{swf_height}" '
		+'codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">'
		+'<param name="movie" value="{swf_url}?border_width={border_width}&alpha={alpha}&strength={strength}&color={color}&width={width}&height={height}" />'
		+'<param name="quality" value="high" />'
		+'<param name="bgcolor" value="transparent" />'
		+'<param name="wmode" value="transparent">'
		+'<param name="allowScriptAccess" value="sameDomain" />'
		+'<embed src="{swf_url}?border_width={border_width}&alpha={alpha}&strength={strength}&color={color}&width={width}&height={height}" quality="high" bgcolor="transparent"'
			+'width="{swf_width}" height="{swf_height}" '
			+'name="{swf_id}" align="middle"'
			+'wmode="transparent" play="true" loop="false" quality="high" allowScriptAccess="sameDomain"'
			+'type="application/x-shockwave-flash"'
			+'pluginspage="http://www.adobe.com/go/getflashplayer">'
		+'</embed>'
		+'</object>';
	html = html.replace(/\{swf_id\}/ig,data.id+'_flash')
			.replace(/\{swf_url\}/ig,glow.swf)
			.replace(/\{color\}/ig,data.color)
			.replace(/\{width\}/ig,parseInt(data.width))
			.replace(/\{height\}/ig,parseInt(data.height))
			.replace(/\{swf_width\}/ig,parseInt(data.width)+2*parseInt(data.border_width))
			.replace(/\{border_width\}/ig,parseInt(data.border_width))
			.replace(/\{swf_height\}/ig,parseInt(data.height)+2*parseInt(data.border_width))
			.replace(/\{alpha\}/ig,data.alpha)
			.replace(/\{strength\}/ig,data.strength);
	return html;
}

function glow_dom(id,data,appenddom)
{
	this.getElement = function(e)
	{
		if (typeof e == 'string') e = document.getElementById(e);
		return (typeof e == 'object')?e:false;
	};
	
	
	this.getWidth = function(e)
	{
		e = this.getElement(e);
		var w = 0;
		if(e.offsetWidth)
		 	w = e.offsetWidth;
		else if (e.style && e.style.width) 
	    	w = parseInt(e.style.width);
	  	else if(e.style && e.style.pixelWidth) 
	    	w = parseInt(e.style.pixelWidth);
	  	return w;
	};
	
	this.getHeight = function(e)
	{
		e = this.getElement(e);
		var h = 0;
		if(e.offsetHeight)
		 	h = e.offsetHeight;
		else if (e.style && e.style.height) 
	    	h = parseInt(e.style.height);
	  	else if(e.style && e.style.pixelHeight) 
	    	h = parseInt(e.style.pixelHeight);
	  	return h;
	};
	
	this.getTop = function(e)
	{
		e = this.getElement(e);
		var t = e.offsetTop;
		return t;
	};
	
	this.getLeft = function(e)
	{
		e = this.getElement(e);
		var l = e.offsetLeft;
	    	return l;
	};
	
	this.getCSS = function(e, css)
	{
		e = this.getElement(e);
		css = css.toLowerCase();
		css2 = css.replace(/(\-[a-z])/g, function(s){ return s.substr(1,1).toUpperCase(); });
		var re = false;
		if (e.style && e.style[css2])
		{
			return e.style[css2];
		}
		else if (e.currentStyle && e.currentStyle[css2])
		{
			re = e.currentStyle[css2];
		}
		else if (document.defaultView)
		{
			var cs = document.defaultView.getComputedStyle(e, null);
			re = cs.getPropertyValue(css);
			if (!re) re = false;
		}
		else re = false;
		return re;
	};
	
	this.getBg = function(e)
	{
		e = this.getElement(e);
		var bg = this.getCSS(e,'border-color');
		if (this.validColor(bg)) return bg;
		bg = this.getCSS(e,'background-color');
		if (this.validColor(bg)) return bg;
		return '#ffffff';
	};
	
	this.validColor = function(color)
	{
		if (color && typeof color == 'string')
			return (color.match(/^#[a-fA-F0-9]{3}$/) || color.indexOf('rgb(') != -1);
		else
			return false;
	};
	
	this.convertColor = function(color)
	{
		if (color && color.indexOf('rgb') != -1)
		{
			color = color.replace(/rgb\(/ig,'');
			var arr = color.split(',');
			var color = parseInt(arr[0])*256*256+parseInt(arr[1])*256+parseInt(arr[2]);
			return '#'+color.toString(16);
		}
		else if( this.validColor(color))
		{
			color = '#'+color.substr(1,1)+color.substr(1,1)
				+color.substr(2,1)+color.substr(2,1)
				+color.substr(3,1)+color.substr(3,1);
			return color;
		}
		else return '#ffffff';
	};
	
	this._glow = function(id,data)
	{
		if (typeof id == 'object')
		{
			data.id = id.id?id.id:'flash_'+parseInt(Math.random()*100000);
			var o = id;
		}
		else
		{
			data.id = id;
			var o = this.getElement(id);
		}
	
		if (!data.color) data.color = default_glow.color; //this.convertColor(this.getBg(o));

		if (o.style && o.style.zIndex)
		{
			var z = parseInt(o.style.zIndex);
		}
		else var z = 1;
		o.style.position = 'relative';
		o.style.zIndex = z+2;
		
		if (!data.left) data.left = default_glow.left;
		if (!data.top) data.top = default_glow.top;
		data.width = this.getWidth(o);
		data.height = this.getHeight(o);
		if (!data.border_width) data.border_width = default_glow.border_width;
		if (!data.strength) data.strength = default_glow.strength;
		if (!data.alpha) data.alpha = default_glow.alpha;
		var div = document.createElement('div');
		with(div.style)
		{
			position = 'absolute';
			border = '0px';
			margin = '0px';
			padding = '0px';
			backgroundColor = 'transparent';
		}
		div.style.top = (parseInt(this.getTop(o))-parseInt(data.border_width) + parseInt(data.left))+'px';
		div.style.left = ( parseInt(this.getLeft(o)) - parseInt(data.border_width)  + parseInt(data.top) )+'px';
		
		div.style.width = (parseInt(data.width)+2*parseInt(data.border_width))+'px';
		div.style.height = (parseInt(data.height)+2*parseInt(data.border_width))+'px';
		div.style.zIndex = z+1;
		
		div.innerHTML = flash(data);
		
		if (appenddom)
		{
			o.offsetParent.appendChild(div);
		}
		else
		{
			var span = document.createElement('span');
			span.appendChild(div);
			document.write(span.innerHTML);
		}
	};
	this._glow(id,data);
}

function search_glow_elements(e)
{
	if (!e || typeof e != 'object' || !e.tagName) return;
	var data  = e.getAttribute('glow');
	if (data != null)
	{
		var appenddom = true;
		try
		{
			eval('data = { '+data+'};');
			if (typeof data == 'object')
			{
				if (!data) data = {};
				glow_dom(e,data,appenddom);
			}
		}
		catch(e)
		{
		
		}
	}
	
	if (e.childNodes && e.childNodes.length >=0)
	{
		for(var i=0;i<e.childNodes.length;i++)
		{
			arguments.callee(e.childNodes[i]);
		}
	}
}

//get url vars
var glow_scripts = document.getElementsByTagName('script');
var glow_url = glow_scripts[glow_scripts.length-1].src;
var glow_get_vars = [];
if (glow_url && glow_url.indexOf("\?") !=-1)
{
	var glow_arr = glow_url.split("\?");
	if (glow_arr[1])
	{
		var glow_reqs = glow_arr[1].split("&");
		for(var _i=0;_i<glow_reqs.length;_i++)
		{
			var glow_req = glow_reqs[_i].split("=");
			window.glow_get_vars[glow_req[0]] = glow_req[1];
		}
	}
}

var glow = 
{
	readyList:[],
	isReady:false,
	swf:(glow_get_vars['swf'])?glow_get_vars['swf']:default_glow.swf,
	ready:function()
	{
		if (glow.isReady) return;
		for(var i=0;i<glow.readyList.length;i++)
		{
			glow.readyList[i].call();
		}
		glow.isReady = true;
	},
	readyBound:false,
	bindReady:function()
	{
		if ( this.readyBound ) return;
		this.readyBound = true;
		if ( document.all && navigator.userAgent.match(/msie/gi) && window == top ) 
		{
			(function()
			{
				if (glow.isReady) return;
				try {
					document.documentElement.doScroll("left");
				} catch( error ) {
					setTimeout( arguments.callee, 0 );
					return;
				}
				glow.ready();
			})();
		}
		
		if (window.onload) glow.readyList.push(window.onload);
		window.onload = glow.ready;
		
	},
	run:function(fn)
	{
		if (document.all && navigator.userAgent.match(/msie/gi))
		{
			glow.readyList.push(fn);
			glow.bindReady();
		}
		else fn.call();
	}
};



if (glow_get_vars['auto'] && glow_get_vars['auto'] == 'no')
{
}
else
{
	glow.run(function()
	{
		search_glow_elements(document.body);
	});
}