Мигающий текст на JavaScript и jQuery

Опубликовано: 07 Авг 2017

Для реализации некоторых текстовых эффектов без JavaScript (или, например, jQuery) не обойтись. Так без них невозможно сделать эффект мигания текста (как отдельных слов так и целых блоков). Далее пример создания мигающего текста на чистом JavaScript и с использованием jQuery.

Мигающий текст на JavaScript:

<html>
<body  onload="setInterval('blinkIt()',500)">
<script type="text/javascript">
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';
   }
 }
}
</script>
<blink>Мигающий текст</blink>
</body>
</html>

Мигающий текст на jQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Blinking Text</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $("#blinkingText").hide();
            setTimeout(function(){$("#blinkingText").show();setInterval(function(){$("#blinkingText").toggle();},500)},3000);            
        });
        </script>
    </head>
    <body>
<p id="blinkingText">Blinking Text</p>
<p style="position: absolute; top: 50px;"><a href="#">Hide Blinking Text (set display: none)</a></p>
</body>
</html>

Плавно мигающий текст с использованием прозрачности на jQuery:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    $.fn.wait = function(time, type) {
        time = time || 1000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };
    function runIt() {
      $("span").wait()
              .animate({"opacity": 0.1},2000)
              .wait()
              .animate({"opacity": 1},1500,runIt);
    }
    runIt();
  });
  </script>
</head>
<body>
<p>Немигающий текст1, <span>мигающий текст1</span>, не мигащий текст2 <span>мигающий текст2</span>.</p>
</body>
</html>

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: