/*!
* 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 插件地址

js文字跳动效果的更多相关文章

  1. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  2. js文字滚动效果实现

    纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...

  3. JS文字翻滚效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...

  4. js文字转移效果

    这个例子算是有点样子的. 思路: 字符串操作.左框里面先是预设的.点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面,以此循环.点击按钮时按钮变为灰色,在循环完成后恢复.计数的总数(右边)是 ...

  5. js文字滚动效果

    function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...

  6. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  7. JS 黑客帝国文字下落效果

    黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  9. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

随机推荐

  1. django验证码功能

    1.目的 现在我们一般访问网页都需要输入验证码,比如博客园,有的甚至是通过手机验证码实时登录.这样做的目的主要还是为了防止其他人的恶意访问,比如爬虫,下面就来看看验证码是如何实现的 2.StringI ...

  2. 数据库MySQL基本介绍安装使用及文件导入导出

    1.数据库(data base) 1.1 简述 把文件存储在一台电脑上(服务器),其他电脑用户可以通过账号密码登陆,通过网络去访问这台电脑上的文件,但是由于每个人的数据是不同的,所以你只能通过自己的账 ...

  3. LeetCode94. Binary Tree Inorder Traversal

    题目 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 考点 stack ...

  4. Windosw系统——常见的问题

    1. 写在某些软件后就无法打开网页,但可以上QQ. 在卸载了一些VPN或USB无线设备后,发现自己网页打不开,但是ping能ping通,也可以登录QQ. 解决办法: (1): 开始运行——regedi ...

  5. django+xadmin在线教育平台(十三)

    这个6-8对应对应6-11,6-12 拷入forgetpassword页面 书写处理忘记密码的view users/views.py # 用户忘记密码的处理view class ForgetPwdVi ...

  6. 「译」setState如何知道它该做什么?

    本文翻译自:How Does setState Know What to Do? 原作者:Dan Abramov 如果有任何版权问题,请联系shuirong1997@icloud.com 当你在组件中 ...

  7. (三)Swagger配置多项目共用

    重构了多个项目后,在联调接口时,查看api会发现Swagger在几个项目可用,有几个不可用,配置都一样,扫描也充分,那问题出在哪里呢?先仔细找了下Docket的源码,发现有这么个方法: /** * P ...

  8. 【Python 2 到 3 系列】 此整型非彼整型

    v2.2 (2.x)以后,python支持不会溢出的 long 型. v3.0后,确切的讲, int 型(依赖运行环境C编译器中long型的精度)消失了,long型替代 int 型,成为新的.不依赖运 ...

  9. Spring使用mutipartFile上传文件报错【Failed to instantiate [org.springframework.web.multipart.MultipartFile]】

    报错场景: 使用SSM框架实现文件上传时报“Failed to instantiate [org.springframework.web.multipart.MultipartFile]”错,控制器源 ...

  10. Immutable

    Immutable 参考文章 https://zhuanlan.zhihu.com/p/20295971?columnSlug=purerender