首页 > web前端 > js教程 > 使文字动效的JavaScript代码

使文字动效的JavaScript代码

php中世界最好的语言
发布: 2018-03-16 16:18:41
原创
2597 人浏览过

这次给大家带来使文字动效的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);
    });
  });
  
};
登录后复制

使用方法:

$(&#39;p&#39;).animateText(15, &#39;foo&#39;);
登录后复制

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

推荐阅读:

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

Node.js的Event Loop详解

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

以上是使文字动效的JavaScript代码的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板