简单JS实现兼容浏览器的闪烁文字
网页设计中有些内容我们想让他突出一些,显眼一些。比如,一段文字我们想做出闪烁的特效,可以利用flash、js或者css来实现。flash对于网页加载速度影响很大,宝宝健康成长网强烈不推荐该法。利用CSS实现闪烁文字这个效果其实很简单,仅是一句代码就可以搞定,那就是 text-decoration:blink; 不过很可惜,只有Firefox和Opera浏览器支持css闪动效果,IE、Chrome以及Safari都不支持 blink 属性。所以,我们只好利用JS脚本语言来实现兼容各浏览器的文字闪烁方法。
先看下效果demo>>
只需要很简单的几句js代码即可实现文字闪动。
<script type = "text/javascript" > (function(){ setInterval(function(){ var o= document.getElementById('headercenter'); o.style.visibility=o.style.visibility=='visible'?'hidden':'visible' },1500); })() </script>
用到的html如下
<div id="headercenter"><p>团结协作 淡泊名利 严谨务实 拼搏进取</p></div>
说明:自定义#headercenter和#headercenter p的css。
文字闪烁间隔时间修改代码中1500即可。
相关阅读: