js文字跳动效果

最新推荐文章于 2024-09-01 03:59:55 发布

weixin_34125592

最新推荐文章于 2024-09-01 03:59:55 发布

阅读量681

点赞数

文章标签： javascript ViewUI

Chaffle 是一款基于 jQuery 的插件，可在鼠标悬停时为元素内的文本添加动态效果，通过随机字符替换原有文本，支持多种语言字符集，如英语、中文、日语平假名及片假名。

/*!
 * chaffle v1.0.0
 * 
 * Licensed under MIT
 * Copyright 2013-2014 blivesta
 * http://blivesta.com
 */
(function($){var namespace="chaffle";var methods={init:function(options){options=$.extend({speed:20,time:140},options);return this.each(function(){var _this=this;var $this=$(this);var data=$this.data(namespace);if(!data){options=$.extend({},options);$this.data(namespace,{options:options})}var $text=$this.text();var substitution;var shuffle_timer;var shuffle_timer_delay;var shuffle=function(){$this.text(substitution);if($text.length-substitution.length>0){for(i=0;i<$text.length-substitution.length;i++){var shuffleStr=random_text.call();$this.append(shuffleStr)}}else{clearInterval(shuffle_timer)}};var shuffle_delay=function(){if(substitution.length<$text.length){substitution=$text.substr(0,substitution.length+1)}else{clearInterval(shuffle_timer_delay)}};var random_text=function(){var str;var lang=$this.data("lang");switch(lang){case"en":str=String.fromCharCode(33+Math.round(Math.random()*99));break;case"zh":str=String.fromCharCode(19968+Math.round(Math.random()*80));break;case"ja-hiragana":str=String.fromCharCode(12352+Math.round(Math.random()*50));break;case"ja-katakana":str=String.fromCharCode(12448+Math.round(Math.random()*84));break}return str};var start=function(){substitution="";clearInterval(shuffle_timer);clearInterval(shuffle_timer_delay);shuffle_timer=setInterval(function(){shuffle.call(_this)},options.speed);shuffle_timer_delay=setInterval(function(){shuffle_delay.call(this)},options.time)};$this.unbind("mouseover."+namespace).bind("mouseover."+namespace,function(){start.call(_this)})})},destroy:function(){return this.each(function(){var $this=$(this);$(window).unbind("."+namespace);$this.removeData(namespace)})}};$.fn.chaffle=function(method){if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof method==="object"||!method){return methods.init.apply(this,arguments)}else{$.error("Method "+method+" does not exist on jQuery."+namespace)}}})(jQuery);

以上 是 chaffle.min.js

　a.html

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="./chaffle.min.js"></script>

<ul class="nav nav-pills site-example-nav">

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav01</a></li>

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav02</a></li>

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav03</a></li>

          <li style="width:80px;"><a href="#" class="chaffle" data-lang="en">nav04</a></li>

          <li style="width:140px;"><a href="#" class="chaffle" data-lang="zh">中文（汉字）</a></li>

          <li style="width:100px;"><a href="#" class="chaffle" data-lang="zh">jQuery插件库</a></li>

          <li style="width:140px;"><a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a></li>

        </ul>

	

<script>

  

  $(document).ready(function() {

    $('.chaffle').chaffle();

  }); 

  

</script>

　　https://github.com/blivesta/chaffle 插件地址