用CSS控制的闪烁效果
一段文本或一张图片,它的周围有一圈光晕,这圈光晕每一秒钟闪烁一次,而当鼠标移到上面时,立即停止闪烁,当鼠标移开时又继续闪烁。这种效果用于那些需要特别引起别人注意的内容上(如:警示、报告新增内容等),能起到较好的效果。
上面这个示例就能实现上面所的效果,由于这里是抓取的一张图片,不能看到动态效果,只要按下面介绍的方法,制作一个试试,其效果是一目了然的。其制作思路是:采用了CSS的“Glow”滤镜产生光晕效果,利用CSS的属性可动态改变的特性,用一小段javascript程序来每一秒钟改变一次属性值,从而实现闪烁的效果,再用两个事件(onmouseover和onmouseout)调用Javascript程序来控制是否闪烁。
制作方法:
1、制作一个Glow滤镜,CSS滤镜的设置方法请参看“CSS滤镜应用技巧”的有关文章。在此不再重复。不是使用Dreamweaver的网友,请把下面的代码复制到网页源代码的〈head〉与〈/head〉之间:
〈styletype="text/css"〉
〈!--
.glow1{filter:glow(color=#FF0000,strengh=2)}
--〉
〈/style〉
2、插入一个图层,取名为:bob。在图层上写上一段文字。再在图层上加载一个Glow滤镜,并加上两个事件以实现当鼠标移到文字上时强制停止闪烁,当鼠标移开文字时继续闪烁。代码:onclick="stopflash(this)",这句代码的作用是:一旦鼠标移到文字上,将调用程序的“stopflash(this)”函数来停止闪烁;onmouseout="init()",这句代码的作用是:一旦鼠标移开文字,将调用程序的“init()”函数来使光晕闪烁。本例完成后图层标记的代码是这样的:
〈divid="bob"style="position:absolute;width:572px;height:35px;z-index:1"class="glow1"onmouseover="stopflash(this)"onmouseout="init()"〉
3、在〈head〉与〈/head〉之间插入这样一段Javascript程序:
〈script〉
〈!--
functioninit()//光晕开始闪烁
{
makeflash(bob);
}
functionmakeflash(obj)
{
obj.flashTimer=setInterval("bob.filters.glow.enabled=!bob.filters.glow.enabled",1000)
}//这里的“1000”是闪烁的时间,以毫秒计,在本例中是设置了1000毫秒(即1秒),可以根据需要修改。
functionstopflash(obj)//光晕停止闪烁
{clearInterval(obj.flashTimer)
}
//--〉
〈/script〉
4、在网页源代码的〈body〉标记中加上这样一段代码:onload="init()"。这句代码的作用是当网页载入时,光晕开始闪烁。
至此,制作结束,按F12就可看到预期的效果了。
光晕的颜色和光晕的长度均可修改CSS滤镜中的参数值来改变,光晕闪烁的时间间隔可通过修改Javascript中的间隔时间值来调整。若是在图层中插入图片(透明背景的gif图片效果更好),则变为图片边缘的光晕闪烁效果。
相关文章
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- PHP 依赖注入(DI)和控制反转(IoC)
- js动画和css3动画_js控制css动画
- unity物体沿着一个方向移动_unity3d控制人物行走
- 前端必备的 CSS 库,normalize.css
- 控制・Oracle 并发控制:实现安全、稳定业务(oracle并发)
- 控制Linux C语言: 光标控制技术(linuxc光标)
- CSS边框长度控制详解编程语言
- Linux进程管理:SL 控制与优化(linux进程sl)
- 主机上的Oracle控制文件的位置(oracle控制文件在哪)
- 深入探索Linux内置账户:权限控制更简单(linux内置账户)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- ADO控制MySQL让你一次性轻松搞定(ado控制mysql)
- Redis面试有效掌握控制命令的关键(redis面试题控制命令)
- 数量注意控制Redis中key的数量(redis需要注意key)
- 控制Redis实现版本控制设计与实现(redis设计与实现版本)
- 用js控制css的不错的方法
- 教你如何用CSS来控制网页字体的显示样式
- 用css来控制图片大小显示的实现方法与代码
- jsCOL能很好的控制表格的列
- CSS控制图片大小-适应宽度
- 控制input的CSS但不影响CheckBox以及Radio的样式
- HTMLDom与Css控制方法
- js控制CSS样式属性语法对照表
- js控制不同的时间段显示不同的css样式的实例代码
- 使用jquery+CSS实现控制打印样式
- javascript实现左右控制无缝滚动