宝宝健康成长网首页刘易桉宝宝健康成长 林林微博 育儿护理知识 宝宝网址导航
当前位置: 首页 >> 网络学习 >> 简单JS实现兼容浏览器的闪烁文字

简单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即可。

发表评论

^留言没头像?教你设置头像!
我的应用 Follow@cnbabyup 宝宝问答>  0-1岁  1-3岁  3-6岁 手气不错