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属性的元素,并让其发光。
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃源码站 - 下载文件说明: alixixi.com┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ 做最好的源码下载网站:源码站,www.alixixi.com ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃【使用前请您先阅读以下条款,否则请勿使用本站提供的文件!】 ┃
┃ 1) 推荐使用:WinRAR V3.4以上版本解压本站软件 ┃
┃ 2) 本站不保证所提供软件或程序的完整性和安全性。 ┃
┃ 3) 请在使用前查毒 (这也是您使用其它网络资源所必须注意的) 。 ┃
┃ 4) 由本站提供的程序对您网站或计算机造成严重后果的本站概不负责。┃
┃ 5) 本站提供的程序均为网上搜集,如果该程序涉及或侵害到您的版权请┃
┃ 立即写信通知我们。 ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ 如果遇到MD5加密文件(一般都是这个),而又不知道密码的, ┃
┃ 请用这组加密的数据1739fddf100746ca替换,那么密码就是:alixixi.com┃
┃ (这个是16位的,32位的是:7773164f11739fddf100746ca6b337834) ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ 欢迎广大程序作者到本站发布您的作品! ┃
┃ 源码站 - 下载源码就到源码站 ┃
┃ 联系邮箱:wuse#alixixi.com( #替换成@ ) ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Java码库
- 粉丝: 2151
- 资源: 6175
最新资源
- whl@pip install pyaudio ERROR: Failed building wheel for pyaudio
- Constantsfd密钥和权限集合.kt
- 基于Java的财务报销管理系统后端开发源码
- 基于Python核心技术的cola项目设计源码介绍
- 基于Python及多语言集成的TSDT软件过程改进设计源码
- 基于Java语言的歌唱比赛评分系统设计源码
- 基于JavaEE技术的课程项目答辩源码设计——杨晔萌、李知林、岳圣杰、张俊范小组作品
- 基于Java原生安卓开发的蔚蓝档案娱乐应用设计源码
- 基于Java、Vue、JavaScript、CSS、HTML的毕设设计源码
- 基于Java和HTML的CMS看点咨询系统设计源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈