其他类别JS+Flash让网页元素发光的插件 glow! 0.1-glow.rar

Flash + Javascript 让网页元素发光 的插件 glow! 作者:Longbill ( www.longbill.cn ) longbill.cn@gmail.com 讨论和更新发布在这里：http://longbill.cn/blog/archives/2008/11/glow.html 在线演示：http://longbill.cn/down/sample/glow/glow.html 现在测试通过: IE6 IE7 Firefox3 Opera Safari(Mac) Chrome 2008-11-6 前两天突发奇想，能不能让网页上的元素很容易的发光？结果正好发现flash里面有这样的滤镜。于是就硬着头皮写了个flash，实现了发光flash的动态生成。再结合javascript实现定位，把发光的flash放到真实的dom后面。于是神奇的事情就发生了。。。 这个插件可以很容易的实现网页元素的发光或者阴影效果！目前只支持矩形发光效果，文字发光还在探索中。。。。 调用方法： 一：载入glow.js后自动探测所有带有glow 属性的元素。 比如： <img id='img1' glow="border_width:20,strength:5" src='http://www.google.com/logos/earthday05.gif' /> (glow属性的参数在后面有详细的解释) 然后在网页的下部（比如</body>前面），调用glow.js: <script src='http://longbill.cn/js/glow.js'></script> 这将产生如下效果： [发光图片] 二：载入glow.js后，手动让元素发光 比如： <input type="button" value="发光按钮，点击查看详情" id="button1" /> 然后在网页加载完成后（如果在网页dom没有加载完成之前给元素加发光效果，ie会报错），使用下面的方法： <script src='http://longbill.cn/js/glow.js?auto=no'></script> <script> glow_dom('button1',{ color:'#ffffff',border_width:10}); //这里的第一个参数是元素的id或者元素本身的引用，第二个参数和方法一的glow属性一样，后面有解释 </script> 如果你的网页有很多外部js，将可能造成网页加载很久才完成的情况。如果你不想等到网页加载完成就想要让元素发光，那么可以使用下面的方法： 首先载入glow.js，并且加上参数auto=no，比如: <script src='http://longbill.cn/js/glow.js?auto=no'></script> 然后在你需要显示发光效果的元素的后面（必须在代码级别紧挨该元素），用下面的代码： <script> glow_dom('button1',{ color:'#ffffff',border_width:10},false); //第三个参数的作用是不使用appendChild方式插入元素，而直接打印源代码（document.write）。这样在ie下就不会报错～ </script> 这将产生如下效果： 参数说明： 注意：元素的glow属性将会被eval成一个object，所以glow属性的内容应该符合object的书写规范。比如 color:'#aaaaaa',alpha:0.5,strength:4 所有参数： color:光晕的颜色 alpha:光晕的透明度,从0到1的小数 strength:光晕强度，大于1的整数 border_width:光晕厚度 left:光晕水平偏移量 top:光晕垂直偏移量，这两个参数用于制作阴影效果。 默认设置： 打开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) }; 这是glow插件的默认参数设置。其中的swf参数是glow.swf的地址，并且可以在调用glow.js的时候通过url GET方式覆盖。比如: <script src="http://longbill.cn/js/glow.js?swf=http://longbill.cn/js/glow.swf"></script> 此外，url 上的参数还可以有auto，表示是否需要自动搜索网页上的带glow属性的元素，并让其发光。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛