CSS 或 JS 实现闪烁文字

  用 Firefox 或者 Opera 的同学比较有眼福,可以看小站首页公告栏处,有一串红字 https://twitter.com/wange1228 强劲而有力的闪烁着,很显眼吧,嗯哼,要的就是这效果。无奈,今天偶遇传说中的文囧,就只好把这小儿科的效果拿出来讲讲。

  这个效果其实很简单,仅是一句 CSS 就可以搞定,那就是 text-decoration:blink; 不过很可惜,IE、Chrome 或 Safari 不支持 "blink" 属性值,所以只有在 Firefox 和 Opera 下支持这 CSS 实现在闪动效果。

  我倒是找到一个各浏览器通用的文字闪烁方法,那就是 JS,不过仅为一个公告就占一段 JS,好像有点太奢侈了,不是我的作风,还是贴上来供大家参考下吧。

< script type = "text/javascript" >
function blinklink() {
    if (!document.getElementById('blink').style.color) {
        document.getElementById('blink').style.color = "red"
    }
    if (document.getElementById('blink').style.color == "red") {
        document.getElementById('blink').style.color = "black"
    } else {
        document.getElementById('blink').style.color = "red"
    }
    timer = setTimeout("blinklink()", 100)
}
function stoptimer() {
    clearTimeout(timer)
} < /script>

  囧文到此结束,看能囧倒几位。

 » 转载请注明来源:Life Studio » 《CSS 或 JS 实现闪烁文字》
 » 订阅本站:http://feed.wange.im

本文已盖 87 层楼

  1. 原来是这样的效果啊 哈哈~~ 还不错。。。现在投奔Fedora12 了。。。先用一段再说 :shock:

  2. 回复 evlos CHINA Google Chrome Windows 说:

    囧,Chrome 弱弱飘过 ~

  3. 回复 willin CHINA Mozilla Firefox Windows 说:

    不錯啊~ 還不囧…
    不知評論郵件有沒有問題?

  4. 回复 Firm CHINA Google Chrome Windows 说:

    这可以玩玩,看看效果如何

  5. 这个可以收藏!

  6. 回复 江流 Internet Explorer Windows 说:

    切 眼花 不玩

  7. 回复 羽中 UNITED STATES Mozilla Firefox Windows 说:

    闪的我头痛。。你丫就不能低调点 – -

  8. 回复 hzlzh CHINA Mozilla Firefox Windows 说:

    果然囧~~很闪~但是毕竟不兼容IE

  9. 这个其实做成静态的也无妨 :mrgreen:

  10. 回复 hiro CHINA Mozilla Firefox Windows 说:

    代码中:使用setTimeout的话,执行一边就结束了,应使用setInterval每100秒跳跃一次

    这样是不是更简单呢?
    setInterval(function() {
    var colorProp = document.getElementById(‘blink’).style.color;
    if (!colorProp ) {
    colorProp = “red”
    }
    if (colorProp == “red”) {
    colorProp = “black”
    } else {
    colorProp = “red”
    }
    }, 100);

  11. 太妙了啊,我喜欢

  12. 呵呵,真逗啊,新年快乐啊

  13. 回复 Internet Explorer Windows 说:

    不抢沙发,CSS我看不懂 :arrow:

  14. 回复 shaynez UNITED STATES Mozilla Windows 说:

    GR更新确实不及时啊……我还以为我沙发了,结果跑过来都第二页了……………… :mad:

  15. 回复 Mozilla Firefox Windows 说:

    为虾米我现在才收到RSS消息?上午我来就看到哦更新 了,RSS现在才提醒。

  16. 回复 QiQBoY CHINA Mozilla Firefox Windows 说:

    做成颜色变换的一闪一闪更好。。

  17. 回复 3g12114 CHINA Internet Explorer Windows 说:

    哈哈,好东西。 :idea: 博主新年快乐!

  18. 回复 Google不爱我 CHINA Google Chrome Windows 说:

    Chrome下安了CubeMe扩展,结果万戈的首页整个是一个蓝色带问号立方体……看来是iPad禁区 :?:

  19. 回复 无名 CHINA Internet Explorer Windows 说:

    技术时间,潜水好好研究了。

  20. 回复 sosohehe CHINA Mozilla Firefox Windows 说:

    话说document.getElementById(‘blink’).style.color这种修改方式会触发回流,是比较消耗资源的

  21. 回复 小雯子 CHINA Mozilla Firefox Windows 说:

    打酱油
       无视的路过
       今天带排骨汤了
       应该很好喝
       哈哈哈
        :oops:

Leave a comment

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析