Question

我想制作一个闪烁的文字。

首先我尝试了<blink> HTML标记，但只在Mozilla Firefox中支持。

然后我尝试了CSS：

<style>
.blink {text-decoration: blink; }
</style>

它不适用于IE 6。

然后我尝试了javascript：

<script type="text/javascript">
function doBlink() {
  // Blink, Blink, Blink...
  var blink = document.all.tags("BLINK")
  for (var i=0; i < blink.length; i++)
    blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "" 
}

function startBlink() {

  if (document.all)
    setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>

现在它无法在Safari或Chrome上运行。

有人可以帮我使用闪烁的文字，它会在所有不同的流行浏览器上运行吗？（IE 6，Mozilla Firefox，谷歌Chrome Safari，Opera。）

Answer 1

这可以通过CSS3来实现

@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}
blink {
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
}

它甚至有很好的淡化效果。在Safari中运行良好，但Chrome在内部有点哭。

Answer 2

真正的跨浏览器/旧版浏览器闪烁标记...

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; }
}

Answer 3

var el = $(".blink");
setInterval(function() {el.toggle()}, 500);

Answer 4

简单的jquery实现，随意扩展以满足您的需求http://jsfiddle.net/L69yj/

var element = $(".blink");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}

Answer 5

试试这个jQuery

function blinks(hide) {
    if (hide === 1) {
        $('.blink').show();
        hide = 0;
    }
    else {
        $('.blink').hide();
        hide = 1;
    }
    setTimeout("blinks("+hide+")", 400);
}

$(document).ready(function(){
    blinks(1);
});

注意：包含jquery文件，并在要闪烁的元素上给出类名“blink”。

提示：.show（）和.hide（）不会保留元素的宽度和高度...如果需要隐藏元素，而不是文档中的位置（维度），请使用。 css（“可见性”，“隐藏或可见”）而不是。

Answer 6

适用于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" : "";
    }
}

Answer 7

<p id="blink">My name is Ankurji1989</p>


<script type="text/javascript">

var blink_line = document.getElementById("blink");

function d_block(){

    if(blink_line.style.visibility=='hidden')
    {
        blink_line.style.visibility='visible';
    }
    else{
        blink_line.style.visibility='hidden';
    }

}
setInterval(function(){d_block();}, 1000);

</script>

Answer 8

它在所有浏览器中都能顺利运行......请尝试它会起作用

<script type="text/javascript">
    function blinker()
    {
        if(document.getElementById("blink"))
        {
            var d = document.getElementById("blink") ;
            d.style.color= (d.style.color=='red'?'white':'red');
            setTimeout('blinker()', 500);
        }
    }
</script>

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

Answer 9

您也可以使用：

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';
        }
    }
}

您可以使用计时器而不是使用标签。我在IE7和Firefox上测试了这个。两种浏览器都允许这样做，但Chrome无法正常运行。希望你能得到答案。

Answer 10

这很有效：

<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>

它看起来很像旧版本，而且它的使用方式也一样。

Answer 11

这不是我的代码，但它在我们的网站上运行良好。唯一的问题是，如果包含在html中它可以工作，但是当作为单独的脚本引用时则不行。

    <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>

闪烁文本跨浏览器

11 个答案: