Rumah > hujung hadapan web > tutorial js > 使文字动效的JavaScript代码

使文字动效的JavaScript代码

php中世界最好的语言
Lepaskan: 2018-03-16 16:18:41
asal
2623 orang telah melayarinya

这次给大家带来使文字动效的JavaScript代码,用JavaScript代码使文字动效的注意事项有哪些,下面就是实战案例,一起来看一下。

有时你会希望给你的一段文字增加动效,让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来达到这个效果。当然你需要结合一个CSS3 transition样式来达到更好的效果。

$.fn.animateText = function(delay, klass) {  
  var text = this.text();  var letters = text.split('');  
  return this.each(function(){    var $this = $(this);
    $this.html(text.replace(/./g, &#39;<span class="letter">$&</span>&#39;));
    $this.find(&#39;span.letter&#39;).each(function(i, el){
      setTimeout(function(){ $(el).addClass(klass); }, delay * i);
    });
  });
  
};
Salin selepas log masuk

使用方法:

$(&#39;p&#39;).animateText(15, &#39;foo&#39;);
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

判断日期是否有效的JavaScript代码段

Node.js的Event Loop详解

JavaScript运行机制之为什么JavaScript是单线程

Atas ialah kandungan terperinci 使文字动效的JavaScript代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan