发表新帖
发表新帖

Blinking text cross browser

后端 未结
关注
11 2343
刺人心
刺人心 2020-12-05 00:55

I want to make a blinking text.

First I tried the HTML tag, but it is only supported in Mozilla Firefox.

Then I tried CSS:

相关标签:
11条回答
  • 执笔经年
    2020-12-05 01:15

    You can also use this:

    function blinkIt() {
    if (!document.all) return;
    else {
        for(i=0;i<document.all.tags('blink').length;i++){
            s=document.all.tags('blink')[i];
            s.style.visibility=(s.style.visibility=='visible') ?'hidden':'visible';
        }
    }
}

    You may use a timer instead of using the tag. I have tested this on IE7 and Firefox. Both browsers allow this, however Chrome doesn’t work properly. Hope you got the answer.

    0 讨论(0)
  • 孤街浪徒
    2020-12-05 01:16

    This is not my code, but it works well in our web site. Only problem is that It works if included in the html but not when referenced as a seperate script.

        <style>
    #blinker    { color: #58bf7a }
    #blinker.on { color: #58d878 }
    </style> 

    <script> 
        var blinker;
        function blink() {
            blinker.className = blinker.className ? "" : "on";
        }
        window.onload = function() {
            blinker = document.getElementById("blinker");
            var interval_id = setInterval(blink, 1000);
        }
    </script>
    0 讨论(0)
  • 梦毁少年i
    2020-12-05 01:17

    The truly cross browser / legacy browser blink tag...

    HTML

    <!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>

<!--[if lt IE 10]>
<script>

toggleItem = function(){
    var el = document.getElementsByTagName('blink')[0];
    if (el.style.display === 'block') {
        el.style.display = 'none';
    } else {
        el.style.display = 'block';
    }
}

setInterval(toggleItem, 1000);

</script>
<![endif]-->

</html>

    CSS

    blink {
  -webkit-animation: blink 1s steps(5, start) infinite;
  -moz-animation:    blink 1s steps(5, start) infinite;
  -o-animation:      blink 1s steps(5, start) infinite; 
  animation:         blink 1s steps(5, start) infinite;
}

@-webkit-keyframes blink {
  to { visibility: hidden; }
}
@-moz-keyframes blink {
  to { visibility: hidden; }
}
@-o-keyframes blink {
  to { visibility: hidden; }
}
@keyframes blink {
  to { visibility: hidden; }
}
    0 讨论(0)
  • 忘了有多久
    2020-12-05 01:26

    Works in IE 10, Firefox 23.0.1, Google Chrome 29.0, Opera 16.0

    blink(0.7);

function blink(speed) {

    if (speed) {
        if (document.getElementsByTagName('blink')) 
            setInterval("blink()", speed*2000);

        return; 
    }

    var blink = document.getElementsByTagName('blink');

    for (var i=0; i<blink.length; i++) {
        blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "";
    }
}
    0 讨论(0)
  • 礼貌的吻别
    2020-12-05 01:30

    This works great:

    <script type="text/javascript">
    function blinker()
    {
        if(document.querySelector("blink"))
        {
            var d = document.querySelector("blink") ;
            d.style.visibility= (d.style.visibility=='hidden'?'visible':'hidden');
            setTimeout('blinker()', 500);
        }
    }
</script>



<body onload="blinker();">
    <blink>Blinking Text</blink>
</body>

    It looks really like the old version, plus it is used the same too.

    0 讨论(0)
  • 南笙
    2020-12-05 01:35 
    var el = $(".blink");
setInterval(function() {el.toggle()}, 500);
    0 讨论(0)
 看不清?
提交回复
热议问题