Для реализации некоторых текстовых эффектов без 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> |
