zoukankan      html  css  js  c++  java
  • js文字跳动效果

    /*!
     * 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="80px;"><a href="#" class="chaffle" data-lang="en">nav01</a></li>
    
              <li style="80px;"><a href="#" class="chaffle" data-lang="en">nav02</a></li>
    
              <li style="80px;"><a href="#" class="chaffle" data-lang="en">nav03</a></li>
    
              <li style="80px;"><a href="#" class="chaffle" data-lang="en">nav04</a></li>
    
              <li style="140px;"><a href="#" class="chaffle" data-lang="zh">中文(汉字)</a></li>
    
              <li style="100px;"><a href="#" class="chaffle" data-lang="zh">jQuery插件库</a></li>
    
              <li style="140px;"><a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a></li>
    
            </ul>
    
    	
    
    <script>
    
      
    
      $(document).ready(function() {
    
        $('.chaffle').chaffle();
    
      }); 
    
      
    
    </script>
    

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

  • 相关阅读:
    本周个人总结(14周)
    本周个人总结
    排球计分规则
    我与计算机
    Tomcat处理HTTP请求原理
    数据结构与算法之排序算法(四):归并排序
    数据结构与算法之排序算法(三):选择排序
    数据结构与算法之排序算法(二):交换排序
    数据结构与算法之排序算法(一):插入排序
    数据结构与算法:概述+思维导图
  • 原文地址:https://www.cnblogs.com/brady-wang/p/8433809.html
Copyright © 2011-2022 走看看