Мигающий текстовый кросс-браузер

Я хочу сделать мигающий текст.

Сначала я попробовал тег <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, Google Chrome Safari, Opera.)

Ответы

Ответ 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 немного кричит внутри.

Ответ 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; }
}

Ответ 3

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

Ответ 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;
    }
}

Ответ 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 ( "видимость", "скрытая или видимая" ).

Ответ 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" : "";
    }
}

Ответ 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>

Ответ 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>

Ответ 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 не работает должным образом. Надеюсь, вы получили ответ.

Ответ 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>

Это похоже на старую версию, плюс она тоже используется.

Ответ 11

Это не мой код, но он хорошо работает на нашем веб-сайте. Единственная проблема заключается в том, что он работает, если включен в html, но не при упоминании как отдельный 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>