• 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 插件地址 

  • 相关阅读:
    java常用英文解释
    干货——myeclipse快捷键
    上海面试经常遇到的事务安全问题
    2016java技术岗面试题
    Echarts 获取后台数据 使用后台数据展示 柱形图
    JS实现的MAP结构数据
    Spring MVC 返回json数据 报406错误 问题解决方案
    junit 注意事项,切记
    JNDI中 java:comp/env 的理解
    JMS发布/订阅消息传送例子
  • 原文地址:https://www.cnblogs.com/brady-wang/p/8433809.html
Copyright © 2020-2023  润新知