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="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文字跳动效果的更多相关文章
- HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
- js文字滚动效果实现
纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...
- JS文字翻滚效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...
- js文字转移效果
这个例子算是有点样子的. 思路: 字符串操作.左框里面先是预设的.点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面,以此循环.点击按钮时按钮变为灰色,在循环完成后恢复.计数的总数(右边)是 ...
- js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- JS 黑客帝国文字下落效果
黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- 使用Three.js实现神奇的3D文字悬浮效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...
随机推荐
- Spring Bean依赖但注入(autowired或resource)时NullPointerException(xml和annotation混用的场景下)
项目中同时使用了xml和annotation的方式管理Spring Bean 启动时候报NullPointerException,依赖注入失败! 参考: http://fly0wing.iteye.c ...
- 前端JavaScript之DOM使用案例
1.弹出框点击关闭 (这个例子关键自己创建标签以及属性,不是太好想啊,而且作用相对来数也不是太大) <!DOCTYPE html> <html> <head> &l ...
- 判断一个Object是否为数组Array的方法
1.constructor constructor 属性是每个有原型对象的原型成员 arr.constructor == Array //true说明arr是数组 2.isArray arr.isA ...
- C#进阶学习笔记(个人整理)
学习笔记 第一章: 一.回顾数组 1.变量 : 只能存储一个数据 2.数组 :存储固定大小的相同类型的数据 3.对象 : 存储多个相同/不同类型的数据 4.集合 : 特殊的容器,存储N个相同/不同类型 ...
- Intellij IDEA 像eclipse那样给maven添加依赖,且Intellij idea里在pom.xml里添加Maven依赖,本地仓库下拉列表显示包很少的血的经验
打开pom.xml,在它里面使用快捷键:ALT+Insert ————>点击dependency 再输入想要添加的依赖关键字,比如:输个spring 出现下图: 根据需求选择版本,完成以后 ...
- Centos7上搭建activemq集群和zookeeper集群
Zookeeper集群的搭建 1.环境准备 Zookeeper版本:3.4.10. 三台服务器: IP 端口 通信端口 10.233.17.6 2181 2888,3888 10.233.17.7 2 ...
- pycharm快捷键一览
编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctrl + P ...
- MUI常用脚本及原生JavaScript常用操作元素方法
1.mui元素转换html元素 var obj=mui("#id")[0]; 2.事件绑定 var btn = document.getElementById("logi ...
- php 操作 mysql 实现批量执行mysql语句 mysql文件
<?php /** * 批量运行sql文件 * 正则分隔是重点 preg_split("/;[\r\n]+/", filecontent) */ $config = requ ...
- 关于TP3.2框架读取Sql server中文字段数据以及处理乱码的一些小心得
最近要做一个项目,需要使用TP3.2框架,之前什么也不会,就硬着头皮上了,结果真的闹了挺多emmmmmm挺低级的错误,就像SQL Server中文字段的读取,一开始我是照着读取英文字段的格式来写的,在 ...