三、（4）jQuery动画案例+插件入门

jQuery动画案例+插件入门

插件的概念与用途

什么是插件

　　插件（Plugin）又称为扩展（Extension），是一种遵循一定规范的应用程序接口编写出来的程序。为什么要用jQuery插件呢：当jQuery库里面的功能不能满足我们的时候，我们就可以开发新的功能来扩展jQuery库，开发jQuery插件的过程其实就是给jQuery对象上面添加新的方法，或者juery.fn对象上面新增方法的过程。

为什么要使用插件

优点：

1、代码简洁：调用时只需要用很少的代码就能实现比较复杂的效果。
2、避免重复写代码：特别是一些企业网站的客户，看到别人网站上面有那种效果，就希望自己的站点也有那种效果。
3、网上插件很多很丰富，容易找到。
4、不需要关注具体实现，只关心如何调用api（方法）。

插件使用通法

1. 引入jquery库
2. 引入插件样式（有的插件不需要样式）
3. 引入插件js库
4. 在你的页面按照插件编写html结构和样式，调用插件的方法
5. 测试效果

插件使用常见的问题

1、样式兼容性问题。
2、插件依赖的jq版本问题。
3、目录改变导致的背景图片或按钮找不到的情况。
4、没有参数说明怎么办，有时候打开插件源码，里面有注释。
5、有的插件不只一个样式或者不止一个js文件。
6、没有参数说明文档的时候，可以百度一下插件的名称，有可能就能找到相关的参数说明。
7、插件demo里面可能引用有外部链接，如果网络慢会加载很久，可以改为本地链接。

插件使用的三步曲

1. 下载相关插件(在网上查找相关需要的插件,下载)
2. 引入相关内容(jq库插件js CSS 在网页中从示例代码中,找到实现的代码,写到自己的网页中)
3. 配置相关插件(结合插件的使用,看示例或文档来实现)

插件案例：轮播动画

(1) 轮播原理介绍
1、新建项目并引入jq库：

2、最简易轮播效果：

样式：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.boxwrapper{
width:400px;
height:100px;
position: relative;
background-color: rosybrown;
left: 200px;
top:200px;
overflow: hidden;
}
.boxinner{
width:1600px;
height:100px;
position: absolute;
left:0;
top:0;
list-style: none;
}
.boxinner li{
width:400px;
height:100px;
float: left;
background-color: green;
}

.boxinner li img{
width:400;
height:100px;
}

#btnleft{
width: 20px;
height: 30px;
position: absolute;
z-index: 100;
left: 0;
top:35px;
background-color: red;
cursor: pointer;
}

#btnright{
width: 20px;
height: 30px;
position: absolute;
z-index: 100;
right: 0;
top:35px;
background-color:red;
cursor: pointer;
}
</style>

2、复杂点的

新增加功能：
原来的四张图片全部切换完了，从新回到开始再切换的。
点击右边按钮的时候，想一直往左移动
点击左边按钮的时候，想一直往右移动

思路：
向左切换的情况：
把4号盒子和1号盒子分别拷贝一份，放在下图的位置：

注意：此处增加了两个盒子，ul也要增加两个盒子的宽度。

当坐标left=-2000px的时候，让 left=-400px;

同理：相反方向也按相同的方法处理。

当移动到left=0的时候，把left改为left=-1200px;

解决鼠标点很快的时候，轮播乱弹的问题：

思路：如果一个轮播动画还没结束，点击向左或者向右按钮就不执行切换。

(2) 轮播插件介绍
下载地址：

http://www.jq22.com/jquery-info385

插件描述：jQuery图片轮播(焦点图)插件jquery.slideBox
兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高 jQuery图片轮播(焦点图)插件jquery.slideBox
特点：兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高，用户体验良好.

可配置参数：

3. jQuery常用插件使用
(1) 表单验证插件

官网下载地址：http://plugins.jquery.com/validation/
使用参考：http://www.jq22.com/jquery-info724

jQuery Validation Plugin 是一个专门用来做表单验证的插件，由于项目中经常用到，所以在这里推荐给大家。该插件可以帮助我们构建一个前端的表单验证。常见的非空验证、邮箱验证、长度验证、数字验证等都可以通过该插件来实现。

验证字段

required –必填字段

remote – 远程验证

minlength – 最小长度验证

maxlength – 最大长度验证

rangelength – 长度范围验证

min – 最小值验证

max – 最大值验证

range – 范围值验证

email – 邮件地址验证

url – URL地址验证

date –日期验证

dateISO –ISO 日期格式验证

number –十进制数验证

digits –数字验证

creditcard – 信用卡号验证

equalTo –和另外一个文本框的值相等验证

1.6.1 表单验证插件用于哪些地方

1、用户登录
2、用户注册
3、产品管理系统，发布产品，修改产品
4、客户管理系统，客户数据的录入，客户信息的修改。
5、其他系统信息的录入与编辑。

总结：只要有表单的地方，就可能会用到表单数据的验证。

1.6.2 传统的验证举例

需求：
1、实现一个表单的必填验证。
2、长度验证。
3、账户已经存在就不能使用。
4、邮箱验证。
5、网址验证。

1.6.3 插件的下载
官网下载地址：http://plugins.jquery.com/validation/
详细参数介绍：http://www.cnblogs.com/lichengjava/archive/2011/05/03/validation.html

第一步：打开插件的下载页面，如下图

点击右侧： download now

会进入下载页面，下载页面从上往下有很多的版本供下载，最上面的是最新版本：

当前插件版本：v1.15.1
需要JQuery版本：1.4.4+

1.6.4 使用方法

1.1.1.1. 表单制作
首先需要制作一个表单，在这里老师就制作一个比较全的表单，包含了普通文本框，日期，数字，单选，复选，下拉，文件，多行文本，以后大家验证其他的表单可以使用同样的方法，特殊需求课进行自定义验证，举一反三，表单的代码位于素材文件夹下面，表单的界面如下（蓝色的文字是验证要求）：

用验证插件来验证此表单（代码以及需要的的资源，上课的时候会给大家）：

1、制作一个表单，给表单取一个id
2、引入jquery库
3、引入验证控件jquery.validate.js
4、当验证的条件不满足的时候，提示默认是英文的，要有默认的中文提示，就引入多语言包js/messages_cn.js
5、写验证规则：给表单的元素取一个name，js验证代码里面增加对应name的验证规则，具体规则参考插件的文档插件的文档一般来至官网、或者官网的demo\如果这些都没有、可以百度下找相关文章，比较出名的插件网友一般都有总结。
6、写验证没有通过的提示。
7、当插件中内置的这些验证都不能满足我们的时候，我们可以自定义验证方法。

在html表单页面代码中引入jq库，验证插件，多语言配置文件：

在代码中写校验规则：

$(document).ready( function () {
$( "#signupForm" ).validate({
rules: {
username: {
required: true,
email:true,
minlength: 2
}

},
messages: {
username: {
required: "请填写你的姓名",
email:"电子邮件格式不正确",
minlength: "Your username must consist of at least 2 characters"
}
}
} );
});

1.1.1.2. 默认规则

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入正整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

1.1.1.3. 默认提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
}

1.1.1.4. 中文提示

如需要修改，可在js代码中加入：

jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});

推荐做法，将此文件放入messages_cn.js中，在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>

1.1.1.5. 自定义验证方法

// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var postcode= /^[0-9]{6}$/;
return this.optional(element) || (postcode.test(value));
}, "请正确填写您的邮政编码");

required:true 必须有值
required:"#aa:checked"表达式的值为真，则需要验证
required:function(){}返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素

radio和checkbox、select的验证：

常用方法及注意问题
1.用其他方式替代默认的SUBMIT
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});
可以设置validate的默认值，写法如下：
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});
如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果一个页面中有多个表单，用
$.validator.setDefaults({
debug: true
})
3.ignore：忽略某些元素不验证
ignore: ".ignore"
4.errorPlacement：Callback Default: 把错误信息放在验证的元素后面
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

使用方法：

实现的效果

下载地址：http://plugins.jquery.com/validation/

推荐一篇文章： http://www.cnblogs.com/lichengjava/archive/2011/05/03/validation.html

使用方法：

$(document).ready( function () {
$( "#signupForm" ).validate( {
rules: {
username: "required",
username: {
required: true,
minlength: 2
},
psw:{
required: true,
minlength: 5
},
psw_c:{
required: true,
minlength: 5,
equalTo: "#psw"
},
age:{
required: true,
maxlength:3,
minlength:1,
number:true,
digits:true,
range:[5,10]
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名至少2位数"
},
psw: {
required: "请输入密码",
minlength: "密码长度至少5位"
},
psw_c: {
required: "请再次输入密码",
minlength: "密码长度至少5位",
equalTo: "两次输入的密码不一致"
},
age: {
required: "请输入年龄",
minlength: "长度至少1位",
maxlength: "最多三位",
number:"必须是数字",
digits:"必须是整数",
range:'5到10之间的数字'
},

email: "邮箱的格式不正确",
agree: "必须接受协议"
},
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
// console.log(error.text());
// console.log(!($("#msg>em:contains('"+error.text()+"')").length>0));
// if(!($("#msg>em:contains('"+error.text()+"')").length>0))
// {
// error.appendTo($("#msg"));
// }

if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
}
} );
} );
</script>

=========== 以下内容由灵魂丶提供============

IE8下有问题

// allow suppressing validation by adding the html5 formnovalidate attribute to the submit button

//这里可以改成这样

if ( $( event.target ).attr( "formnovalidate" ) !== undefined && $( event.target ).attr( "formnovalidate" ) !=="") {
validator.cancelSubmit = true;
}

如何自定义验证：

//自定义验证
$.validator.addMethod("isPositive",function(value,element){
console.log(value,element);
var score = /^[0-9]*$/;
return this.optional(element) || (score.test(value));
//optional 用于表单控件的值不为空时才触发验证
},"<font color='#E47068'>请输入大于0的数字</font>");

(2) jQuery图片延迟加载插件jQuery.lazyload
下载地址：
http://www.jq22.com/jquery-info390

插件描述：jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。
使用方法
引用jquery和jquery.lazyload.js到你的页面
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">

js出始化lazyload并设置图片显示方式

在图片中也可以不使用 class="lazy"，初始化时使用

$("img").lazyload({effect: "fadeIn"});

这样就可以对全局的图片都有效！
如果想提载入图片，可以使用 threshold 进行设置

$("img.lazy").lazyload({ threshold :180});

以上实例的含义是：在图片距离屏幕180px时提前载入

路径依据实际目录来确定。

图片引用lazyload 方式
<img class="lazy" data-original="img/bmw_m1_hood.jpg" />
参数设置
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

(3) 日期时间插件My97 DatePicker
http://www.my97.net/dp/down.asp
文档地址：
http://www.my97.net/dp/demo/

(4) 手势密码插件

下载地址：http://www.jq22.com/jquery-info4240

插件描述：是一个在web前端实现手势密码功能的插件（9个点的那种）支持PC和手机，支持Zepto。

jQuery.gesture.password.js
jQuery手势密码插件
jQuery.gesture.password.js是一个在web前端实现手势密码功能的插件（9个点的那种）支持PC和手机，支持Zepto。具备一定的可定制性和扩展性。
文档
第一步引入本插件的js文件,需要和jQuery一起引用。

1.新建一个div，这里把id值设为gesturepwd

4.现在来初始化插件咯，需要传递一些参数。所有的参数都不是必须的，默认值就如下。

$("#gesturepwd").GesturePasswd({
backgroundColor:"#252736", //背景色
color:"#FFFFFF", //主要的控件颜色
roundRadii:25, //大圆点的半径
pointRadii:6, //大圆点被选中时显示的圆心的半径
space:30, //大圆点之间的间隙
width:240, //整个组件的宽度
height:240,
//整个组件的高度
lineColor:"#00aec7", //用户划出线条的颜色
zindex :100 //整个组件的css z-index属性
});

(注意：插件css的position属性为relation，即相对定位。)

5、用户密码的表示：

九个点，从左到右从上到下，依次表示为 1 2 3 4 5 6 7 8 9 。

6、一个重要的事件：hasPasswd, 当用户手势指示完毕，组件会触发一个hasPasswd事件，表示已取得用户所输入的密码。该事件会带有一个sting类型的参数，为用户的密码。你需要在组件外部监听这个事件以获取用户输入的密码。

$("#gesturepwd").on("hasPasswd",function(e,passwd){ //passed为用户所输入的密码，进行处理，加密后交给后端验证等。。。}

7、在验证了用户密码的正确或错误后，你可以在组件外部对组件触发事件 passwdRight 或passwdWrong来告诉组件，已让它的线条变成绿色或红色。

$("#gesturepwd").on("hasPasswd",function(e,passwd){ //passed为用户所输入的密码，进行处理，加密后交给后端验证等。。。

var result= //用户密码对或错
if(result == true){
$("#gesturepwd").trigger("passwdRight"); setTimeout(function(){ //密码验证正确后的其他操作，打开新的页面等。。。

},500) //延迟半秒以照顾视觉效果
} else{
$("#gesturepwd").trigger("passwdWrong"); //密码验证错误后的其他操作。。。

}
})
8.终了~

你可以随意使用本项目，只需要在您的项目中添加这么一行注释：
jquery.danmu.js (//github.com/chiruom/jquery.gesture.password.js/) - Licensed under the M

(5) 响应式瀑布流插件

使用场景：

1、展示产品
2、展示相册
3、个人微博
4、博客展示

下载地址
http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html

Pinterest Grid是一款仿Pinterest网站的响应式网格瀑布流布局jQuery插件。该瀑布流插件使用简单，可以随父容器的大小自动调节网格布局，并且支持IE8+的IE浏览器。

使用方法

使用该瀑布流插件需要引入jQuery和pinterest_grid.js文件。
<script src="js/jquery.min.js"></script>
<script src="js/pinterest_grid.js"></script>

HTML结构
该jQuery瀑布流布局插件使用下面的HTML结构。

<article class="white-panel">
<img src="1.jpg" alt="...">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>

<article class="white-panel">
<img src="2.jpg" alt="...">
<h1><a href="#">Title 2</a></h1>
<p>Description 2</p>
</article>

<article class="white-panel">
<img src="3.jpg" alt="...">
<h1><a href="#">Title 3</a></h1>
<p>Description 3</p>
</article>

</section>

CSS样式
你需要为该瀑布流布局添加下面的一些必要的CSS样式。
#gallery-wrapper {
position: relative;
max-width: 100%;
width: 100%;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 10px;
}

.white-panel img{
width: 100%;
}

.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

初始化插件

在页面DOM元素加载完毕之后，可以通过pinterest_grid()方法来初始化该瀑布流布局插件。

$("#gallery-wrapper").pinterest_grid();

如果需要配置参数，格式如下：

$("#demo").pinterest_grid({
no_columns:6,//每行显示的个数
padding_x:15,//图片的横向间距
padding_y:15, //纵向间距
margin_bottom: 50, //底部间距
single_column_breakpoint:800//响应式设置在800像素范围内展示一张图片
});

参数详解

该瀑布流布局插件有以下一些可用的配置参数。

no_columns：网格布局一行的列数。默认值为一行3个网格。
padding_x：网格在X轴方向的padding值。默认值为10像素。
padding_y：网格在Y轴方向的padding值。默认值为10像素。
margin_bottom：网格底部的margin值。默认值为50像素。
single_column_breakpoint：指定在视口多大时一行只显示一个网格。

(6) 自动完成插件completer
效果图

使用场景
我们在表单输入的时候，如要输入邮箱之类，只需输入邮箱名前段，那么@后面的内容将自动补全，将常用的几个邮箱列出来，用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成，这些都由插件completer来帮您实现。

下载地址
https://github.com/fengyuanchen/completer/tree/v0.1.3

http://www.open-open.com/lib/view/open1451735836026.html

使用方法

第一步：写好自己的页面样式。
第二步：引入插件样式，引入jq库和插件js

<link rel="stylesheet" type="text/css" href="css/completer.css"/>

<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/completer.min.js" type="text/javascript" charset="utf-8"></script>

第三步：调用插件

直接$(element).completer()调用，非常简单

//电子邮件自动补全
$("#tbsearch").completer({
separator: "@",
itemTag:"li",//默认标签
position:"bottom",//列表展示的位置
selectedClass:"completer-selected",
source: ["163.com", "qq.com", "126.com", "139.com", "189.com","gmail.com", "hotmail.com", "icloud.com"],
complete:function(){
console.log("输入完成!");
}
});

//时间自动补全
$("#auto-complete-time").completer({
filter: function(val) {//如果你输入的时间是26:30 filter起过滤的作用
val = val.replace(/\D/g, "").substr(0, 2);
if(val) {
val = parseInt(val, 10) || 0;
val = val > 23 ? 23 : val < 10 ? "0" + val : val;
}
return val;
},
separator: ":",
source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
});

//网址自动补全

var $autoCompleteDomain = $("#auto-complete-domain"),
$autoCompleteGo = $("#auto-complete-go");
$autoCompleteDomain.completer({
complete: function() {
var url = "http://www." + $autoCompleteDomain.val();

$autoCompleteGo.attr("href", url);
},
separator: ".",
source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"]
});

如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。

参数详解
Completer插件提供了丰富的选项设置和方法调用。

选项说明默认值
complete 当输入完成时触发 function() {}
itemTag 弹出展示面板中的列表元素标签 "li"
filter 过滤函数，当输入后会先过滤相关列表内容再展示列表 function(val) { return val; }
position 弹出列表面板相对输入框的位置，值有"top", "right", "bottom", "left". "bottom"
source 将要自动补全展示的数据 []
selectedClass 当弹出面板中的选项被选中时的样式 "completer-selected"
separator 分隔符，将输入的内容与建议自动完成的部分分隔，如@ ""
suggest 如果设置成true，将会进入建议suggestion模式，将自动匹配所输入的内容 false
template 弹出面板的模板 "<ul class="completer-container"></ul>"
zIndex 弹出面板的css中的z-index值 1

(7) 动画缓动插件

为什么要使用缓动函数

在平常的生活中，物体在运动的过程中，总是时而加速，时而减速。因此我们的大脑习惯了这种物体的这种自然的运动方式。所以在应用中加入这种自然的运动方式，会让用户觉得很舒服。

jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数，这就是缓动(easing)，它确定了动画过程不同时刻的速度。

例如，将一个元素移过页面的时候，可能让这个元素缓慢地开始移动，然后变得很快，最后随着动画的完成再次慢下来。给动画添加缓动，使得动画在视觉上更有趣且更有动态感。

jQuery本身只包含了两个缓动方法：swing和linear。

Linear:

提供了一个稳定的动画，以使得动画的每个步骤都是相同的(例如，如果要让一个元素以逐渐变化的方式穿过屏幕，每一步的距离和前一步都是相同的)。

Swing:

要更加动态一些，随着动画的开始变得更加快一些，然后再慢下来。swing是一个常用设置，因此，如果没有指定任何缓动，jQuery会使用swing方法。

对于任何jQuery效果来说，缓动方法是其第二个参数，因此，要使用linear方法将一个元素滑出视线，可以这样编写代码：

$('#element'). slideUp(1000，'linear');

当使用animate()函数的时候，缓动方法是第三个参数，第一个参数是一个对象直接量，包含了我们想要实现动画的CSS属性；第二个参数是动画的整体速度。例如，要对动画代码使用linear缓动方法，可以像下面这样编写代码：

$('#message').animate(
{
left：'650px',
opacity：.5,
fontSize：'24px'
},
1500,
'linear'
);

jQuery只提供的两个缓动方法，使用jQuery插件jQuery Easing可以添加一系列的其他的缓动方法。

jQuery Easing是在jQuery原有的动画效果上进行了扩展，所以使用时可以根据jQuery原有的动画函数进行扩展。

插件下载地址

http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

使用方法

效果演示
http://www.uedsc.com/wp-content/uploads/2015/05/easing-demo/

这个插件弥补了jquery里面的动画效果的不足，使动画效果更加强悍。

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下：

$(element).slideUp({
duration: 1000,
easing: method,
complete: callback
});

参数duration：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。
参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果。
参数complete：动画结束后回调函数callback，可以自定义动画结束后的调用函数

常用参数（easing）

①　linear
②　swing
③　jswing
④　easeInQuad
⑤　easeOutQuad
⑥　easeInOutQuad
⑦　easeInCubic
⑧　easeOutCubic
⑨　easeInOutCubic
⑩　easeInQuart
11　easeOutQuart
12　easeInOutQuart
13　easeInQuint
14　easeOutQuint
15　easeInOutQuint
16　easeInSine
17　easeOutSine
18　easeInOutSine
19　easeInExpo
20　easeOutExpo
21　easeInOutExpo
22　easeInCirc
23　easeOutCirc
24　easeInOutCirc
25　easeInElastic
26　easeOutElastic
27　easeInOutElastic
28　easeInBack
29　easeOutBack
30　easeInOutBack
31　easeInBounce
32　easeOutBounce
33　easeInOutBounce

方法介绍

1) def：默认方式设置
2) swing：默认方式加载
3) Quad：二次方缓动(t)
4) Cubic：三次方缓动
5) Quart：四次方缓动
6) Quint：五次方缓动
7) Sine：正弦曲线缓动
8) Expo：指数曲线缓动
9) Circ：圆形曲线的缓动
10) Elastic：指数衰减的正弦曲线缓动
11) Back：超过范围的三次方缓动
12) Bounce：指数衰减的反弹缓动

关于In、Out、Inout的说明：

 easeIn：加速度缓动；
 easeOut：减速度缓动；
 easeInOut：先加速度至50%，再减速度完成动画。

参数如何应用：

$(element).slideUp(duration,easing,[callback]);

2、fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

3、animate
$(element).animate({properties},duration,easing,callback);

例如：
$(element).animate({
height:500,
width:600
},{
easing: 'easeInOutQuad',
duration: 500,
complete: callback
});

4、jQuery1.4+版本更可以：
$(element).animate(
{
left:[100,'swing'],
top:[100,'easeOutBounce']
}
);

或者

jQuery(myElement).animate(
{ left:100,top:100 },
{ specialEasing:{left: 'swing',top:'easeOutBounce'} }
);

练习题
1、使用slideUp和slideDown分别练习5个缓动效果。
$("#aaa").slideUp({
duration: 1000,
easing: 'easeOutBounce',
complete: function(){
console.log("完毕了");
}
})

(8) 表格排序插件
官网地址：http://tablesorter.com/docs/ （打开很慢）

使用场景
在业务系统的开发中，经常会遇到报表开发，做报表数据的排序是免不了的，特别是在b/s系统开发中，排序通常是在服务端完成的，每排一次序都需要查询一次数据库，这样做很麻烦，而且对数据库的压力也很大。如果使用jquery插件tablesorter来完成静态排序，可以大大减轻了数据库的压力。

优点：只查询一次数据库就可以按照指定列排序。

表格数据
<table border="1" cellpadding="0" cellspacing="0" id="sortTable" class="tablesorter">
<thead>
<tr>
<th>序号</th>
<th>地址</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
<th>创建日期</th>
</tr>
</thead>
<tr>
<td width="53">1</td>
<td width="181">山西省长治市</td>
<td width="117">赵磊</td>
<td width="117">24</td>
<td width="117">优</td>
<td width="120">2006.10.10</td>
</tr>
<tr>
<td>2</td>
<td>山西省太原市</td>
<td>李清</td>
<td>30</td>
<td width="117">优</td>
<td>2008.12.30</td>
</tr>
<tr>
<td>3</td>
<td>河南省郑州市</td>
<td>常建坤</td>
<td>51</td>
<td width="117">良</td>
<td>2002.08.30</td>
</tr>
<tr>
<td>4</td>
<td>山东省济南市</td>
<td>张耀</td>
<td>20</td>
<td width="117">优</td>
<td>2001.01.05</td>
</tr>
<tr>
<td>5</td>
<td>四川省成都市</td>
<td>唐骏</td>
<td>15</td>
<td width="117">良</td>
<td>2005.07.08</td>
</tr>
<tr>
<td>6</td>
<td>广东省广州市</td>
<td>安意如 </td>
<td>36</td>
<td width="117">中</td>
<td>2006.04.30</td>
</tr>
<tr>
<td>7</td>
<td>湖南省长沙市</td>
<td>何马</td>
<td>28</td>
<td width="117">良</td>
<td>2007.12.12</td>
</tr>
<tr>
<td>8</td>
<td>湖北省武汉市</td>
<td>苏小白</td>
<td>41</td>
<td width="117">差</td>
<td>2009.05.06</td>
</tr>
<tr>
<td>9</td>
<td>江苏省杭州市</td>
<td>饶尚宽</td>
<td>22</td>
<td width="117">良</td>
<td>2010.12.10</td>
</tr>
<tr>
<td>10</td>
<td>陕西省西安市</td>
<td>石晓娜</td>
<td>15</td>
<td width="117">良</td>
<td>2003.03.05</td>
</tr>
</table>

例1：所有列排序
<script type="text/javascript">
$(function() {
$("#sortTable").tablesorter();
});
</script>

例2：禁用地址列排序。
实际开发中，我们可能并不需要表头里所有的列都排序，需要禁用一些列排序。

$(function() {
$("#sortTable").tablesorter({
headers:{1:{sorter:false}}//禁用索引为1 的列排序
});
});

中文字符排序的时候，默认用字符的 Unicode 编码比较的，而不考虑当地的排序规则。
如果要按照优良中差排序，则需要转为数字。
例3：成绩按优良中差排序

$("#sortTable").tablesorter({
headers: {
4: {
sorter: "mygrade"
}
}
});
</script>

例4 : 模拟点击

$(function() {
$("#sortTable").tablesorter();
});
$("#btnsort").click(function() {
var ths = $("#sortTable th"); //取得所有th元素
ths.eq(3).trigger("click"); //模拟点击事件就像他真的被点击了一样
});

(9) 旋转木马插件

实现效果

下载地址
http://www.17sucai.com/pins/13028.html

下载需要积分？怎么办？

如何下载

点击查看演示，进入演示页面，能看到效果，就能把相关的资源下载下来，一般都是包括样式，脚本，html结构者三部分，都可以从查看源码里面下载下来。

点击查看演示，进入这个页面：

点击右上脚的叉，把广告关掉，然后点击右键，查看源代码。

代码片段

下载文件

调用步骤

打开index.html,引入样式表、jq库、和插件，在你需要加入旋转木马效果的容器里面加入html结构：

代码片段：

<li class="poster-item">
<a href="#"><img src="imgs/5.jpg" width="100%" height="100%"></a>
</li>

</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
<script type="text/javascript">
Carousel.init($(".J_Poster"));
</script>

插件参数是在外层容器上面通过data-setting属性配置的。

详细参数说明：

(10) 放大镜制作

背景：今年来，电商平台飞速发展，很多商城犹如雨后春笋般的建立起来，产品的展示样式多种多样，其中产品放大看局部效果比较常见。

素材：按比例(1:3)制作的小图和大图各一张
原理：
1、小图上面一个拖动的小方块，小方块拖动的时候，获取鼠标移动的坐标，小图上面移动
水平方向长度为a，大于上面就移动3a,同理竖直方向小方块移动b,大图也移动3b。
2、注意：小图上面的方块向左移动的时候，大图往右移动。垂直方向也是同理。
html结构：

Css样式：

计算样式注意：

前提：保证小图和大图都在各自的容器里面居中（绝对定位，水平和垂直方向都居中）。

1、小图居中比较简单：图片和容器大小一样，自然就居中了。
2、大图居中计算方法：

(11) 滚动到楼层制作

4. 如何解决多库共存的冲突（了解）
从引入库的顺序看，分两种情况：

1、先引入jQuery,再引入其他库。

jQuery不需要交出使用权，$符号后面会被其他库覆盖，直接用别名做些其他工作。

2、先引入其他库，再引入jQuery,必须先交出$符号的使用权。

办法1、原来使用$的地方，直接使用jQuery.

办法2、使用别名。例如: var $$= jQuery;

办法3、使用一个自执行的匿名函数，在封闭空间内独享$符号。

5. jQuery EasyUI入门--(了解)
(1) EasyUI 简介
easyui是一种基于jQuery的用户界面（后端）插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
(2) EasyUI 下载和使用
Jquery EasyUI中文网（http://www.jeasyui.net）网站内容基于或源于 EasyUI官网（http://www.jeasyui.com），是一个非盈利性网站，完全遵循官方Free - Non-commercial 及CC BY 3.0协议。

• 面板Panel
• 手风琴Accordion
• 选项卡Tabs
• 布局Layout
• 数据表格DataGrid
• 属性网格PropertyGrid
• 树Tree
• 树网络TreeGrid
• 链接按钮LinkButton
• 菜单Menu
• 菜单按钮MenuButton
• 分割按钮SplitButton
• 分页Pagination
• 进度条ProgressBar
• 搜索框SearchBox
• 表单Form
• 文本框TextBox
• 文件框FileBox
• 组合Combo
• 组合框ComboBox
• 组合网络ComboGrid
• 组合树ComboTree
• 号码框NumberBox
• 数字调整器NumberSpinner
• 日历Calendar
• 日期框DateBox
• 日期时间框DateTimeBox
• 时间微调TimeSpinner
• 日期时间微调
• 滑块Slider
• 验证箱ValidateBox
• 窗口Window
• 对话框Dialog
• 消息Messager
• 拖拽Draggable
• 可拖拽的Droppable
• 可调整大小的Resizable
• 工具提示Tooltip

课后练习

1. 练习使用JQuery插件，到http://www.jq22.com/网站下载使用各类实用的插件

面试题

9.1 使用插件要注意些什么？如何解决插件多库共存的冲突？

9.2 说一说电商分类菜单的制作思路。

posted @ 2021-02-28 22:56 全村的希望、阅读(208) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码

三、（4）jQuery动画案例+插件入门

插件的概念与用途

什么是插件

为什么要使用插件

插件使用通法

插件使用常见的问题

插件使用的三步曲

插件案例：轮播动画

课后练习

面试题

公告

不负青春，不负代码

三、（4）jQuery动画案例+插件入门

插件的概念与用途

什么是插件

为什么要使用插件

插件使用通法

插件使用常见的问题

插件使用的三步曲

插件案例： 轮播动画

课后练习

面试题

公告

插件案例：轮播动画