十、常用插件 - 《jQuery 学习笔记》

一、颜色渐变
二、弹出层插件layer
三、图片懒加载
四、jquery Easing.js 插件
五、 jquery.ui.js插件
六、360度3D 旋转插件
七、视差滚动插件
八、制作jQuery插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。 jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。常用网站：jquery之家 jquery插件库 github 站长之家

颜色渐变插件
弹出层插件 layer
- layer插件
图片懒加载插件
- jQuery.lazyload
动画插件 Easing.js
抽奖插件
放大镜插件
手风琴插件
侧边栏插件
jQueryUI：常用的2-3个功能演示
360度旋转插件
视差滚动插件

一、颜色渐变

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

//使用插件的步骤
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件
jQuery("#go").click(function(){
    jQuery("#block").animate({
        backgroundColor: "#abcdef"
    }, 1500 );
});

二、弹出层插件layer

三、图片懒加载

懒加载插件 (当图片随着滚动条滚动将要显示的时候才去加载图片)

//1. 引入jQuery文件
//2. 引入插件（如果有用到css的话，需要引入css）
//3. 使用插件
<!--引入插件-->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<!--html标签-->
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
<!--js代码-->
$("img.lazy").lazyload();

四、jquery Easing.js 插件

介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。
环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它

//animate 四个参数
//1.动画属性:格式为json
//2.duration:持续时间
//3.过渡效果:过渡效果
//4.complete:成功后的回调函数
$(".car").animate({"left": "150%"},  4000, "easeInElastic", function(){});
//注意点：car需要添加定位

//也可以这样写
$(".car").animate({ 
    height:500, 
    width:600 
},
{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: function(){} 
});

五、 jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。现在用的不多，主要用bootstrap。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程

//基本使用:
1.引入jQuery
2.引入jQueryUI的样式文件
3.引入jQueryUI的js文件
4.使用jQueryUI功能
    根据f12找到对应的页面元素，复制代码到当前html文件中
    复制对应的css和js文件代码(打开网页source源码，根据id查找对应的代码复制黏贴)

六、360度3D 旋转插件

##1. 引用js文件包
<script src="js/jquery.min.js"></script>
<script src="js/circlr.min.js"></script>
##2. 书写结构：
<div class="container">
        <div id="circlr">
             <img data-src="picture/1.png" />
             <img data-src="picture/2.png" /> 
             <img data-src="picture/3.png" />  
             ...
            <div id="loader"></div>
        </div>
 </div>
//注意  自定义属性  data-src 里面写路径    
//loader 是加载图片  
##3. css样式
#circlr {
  cursor: move;
  margin: 0 auto;
  min-height: 100px;
  position: relative;
}
#circlr #loader {
  background: url(../images/loader.gif) center center no-repeat;
  bottom: 0;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
##4. 调用文件对象
<script type="text/javascript">
    var crl = circlr('circlr', {
      scroll : true,
      loader : 'loader'
    });
</script>

七、视差滚动插件

视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术
主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。这种效果可以给网站一个很好的补充

7-1 特性

视差滚动效果酷炫，适合于个性展示的场合。
视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
视差滚动容易迷航，需要具备较强的导航功能。

7-2 原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。
有的时候也可以加上一些透明度、大小的动画来优化显示。 
利用background-attachment属性实现。
background-attachment: fixed || scroll || local
 1.fixed:背景图片的位置固定不变
 2.scroll:当滚动容器的时候，背景图片也会跟随滚动
 3.local:背景图片会跟随内容一起滚动

## background-attachment介绍
<div id="box">
    <div id="inner">
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p><p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
        <p>文本</p>
    </div>
</div>
<style>
    #box{
        width: 300px;
        height: 300px;
        background: yellow;
        overflow: auto;
    }
    #inner{
        width: 250px;
        height: 400px;
        background: red;
        overflow: auto;
        background-image: url(images/shuli.jpg);
           /*background-attachment:fixed;*/  /*无论是inner盒子本身发生滚动还是inner盒子内容发生滚动，背景图片都不滚动*/
        /*background-attachment:scroll;*/ /*当inner盒子滚动的时候背景图片也会滚动，inner内容滚动的时候背景图片不滚动*/
         background-attachment:local; /*滚动inner盒子本身还是inner盒子内容，背景图片都会被滚动*/
    }
</style>

7-3 Stellar.js的使用

stellar.js是一个 jQuery插件，能很容易地给网站添加视差滚动效果。尽管已经停止了维护，但它非常稳定，与最新版本的jQuery兼容，很多开发者也在使用它。这个插件在jQuery插件库里很流行。

http://markdalgleish.com/projects/stellar.js

##1. 引用 js包
<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

##2. 引用html
<div class="content" id="content1">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content2">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>

##3. 引入CSS
body {
    font-size: 20px;
    color: white;
    text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {
    padding: 0 0.5em;
    margin: 0;
}
.content {
    background-attachment: fixed;
    height: 400px;
}
#content1 {
    background-image: url("xxx.jpg");
}
#content2 {
    background-image: url("xxx.jpg");
}
#content3 {
    background-image: url("xxx.jpg");
}
#content4 {
   background-image: url("xxx.jpg");
}
#content5 {
   background-image: url("xxx.jpg");");
}
#content6 {
    background-image: url("xxx.jpg");
}

##4. js调用函数
$.stellar({
    horizontalScrolling: false,
    responsive: true
});

7-4 Stellar.js的详细参数

名称	说明
horizontalScrolling 和 verticalScrolling	该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向，为布尔值，默认为true
responsive	窗口加载完毕或者改变大小时是否刷新滚动元素，默认为false
hideDistantElements	该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false
data-stellar-ratio=”2”	定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio	该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。例如值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

八、制作jQuery插件

给jQuery增加方法的两种方式

$.method = fn        静态方法
$.fn.method = fn    实例方法

原理：jquery插件其实说白了就是给jquery的原型属性增加一个新的方法，让所有的jquery对象拥有某一个功能。

//通过给prototype添加方法就能够扩展jquery对象
$.prototype.pluginName = function() {};
//fn 等效于 prototype
$.fn.pluginName = function() {};

增加一个静态方法，实现两个数的和，插件

(function ($) {
  $.add = function (a, b) {
    return a + b;
  }
}(jQuery))
$.add(5, 6);

实例方法制作简易的jquery插件

//1.新建jquery.bgColor.js文件
//给jquery对象新增一个设置颜色的方法
$.fn.bgColor = function(color){
    //原型中的this是当前对象
    this.css("backgroundColor",color);
    return this;
}
//2.使用上面自定义的jquery插件
//2.1 引入js
//2.2 使用自定义的插件
//调用我们自己定义的方法给jquery对象赋予颜色
$("div").bgColor("red");

自定义表格插件

(function($) {
    // 内部的变量，外部无法访问，防止变量名冲突
    var a = 0;
    // 给$增加了一个实例方法
    $.fn.table = function (header, data) {
        var array = [];
        array.push('<table>');
        array.push('<tr>');
        // 生成表头
        $.each(header, function () {
            array.push('<th>' + this + '</th>');
        })
        array.push('</tr>');
        // 生成数据行
        $.each(data, function (index) {
            // this是当前遍历到的数组中的每一个对象
            // 拼数据行
            array.push('<tr>');
            array.push('<td>' + (index + 1) + '</td>');
            // 遍历对象，拼表格
            for (var key in this) {
                array.push('<td>' + this[key] + '</td>');
            }
            array.push('</tr>');
        })
        array.push('</table>');
        this.append(array.join(''));
    }
}(window.jQuery))