jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。

jquery.easing.js 这个插件，增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。

先来看一下：Demo。官方也有案例：打开官方主页。

如何使用 jquery.easing.js

第一步 引入插件

jQuery 插件嘛，当然要先引入 jQuery，然后再引入 jquery.easing.js 。

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

然后再在引入代码下面编写调用的 Javascript 代码，注意代码顺序。

第二步 启用插件

首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度，从原本的 300px 变成 600px。按照 animate 的写法，加上 easing 。

$(‘.aa’).animate( {‘width’:’600’} , { duration:1000,easing:’easeInOutCirc’ });

这样，就对 aa 对象，启用了一个 easeInOutCirc 过渡效果，在 1000毫秒 内变成 600px。

可以应用的动画方法

不仅仅支持 animate 方法，还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以，这个插件相当于扩充了官方的过渡效果样式。

插件的参数

这个插件有三个参数：duration、easing、complete。

duration 参数

用来指定动画变化的时间，以毫秒为单位。

easing 参数

指定这个动画要使用何种过渡样式。具体的过渡样式名和效果，需要在官方主页上查看左边的 “Example”，选择找到自己想要的效果。

complete 参数

设置一个回调函数，当动画完成之后，执行这个函数。

其他注意事项

使用 slideUp 动画方法

slideUp 这类的动画方法，要比 animate 简单一些，不需要复杂的属性参数，所以可以直接这样写：

$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});`</pre>
其他的 hide 、show 之类的方法，自行类比。

### 指定默认的 easing 样式

在使用中 easing 参数是可以省略的，省略之后，就会调用默认的过渡样式。可以使用下面一句代码，指定默认的动画过渡样式。
<pre>`jQuery.easing.def = "过渡样式名，例如 easeInOutCirc";

用起来挺简单的，但是有了更和谐的变化效果，可以增强用户体验。更多用法欢迎观看 Demo 。

Jquery.lazyload.js 这个jquery插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。一个简单的例子，如果一个人不看下面的图片，那加载下面的图片就是一种浪费。

但是现在，很多javascript大牛分析得出，这个插件其实并没有真正的缓加载效果。确实，官方也已经给出了说明和解决方法了。

插件原理：修改目标的src属性为orginal属性，从而中断图片的加载。检测滚动状态，然后把视野中的目标src属性还原，制造缓冲加载的效果。
原因：在新版的浏览器中，即使你删除了javascript控制的src属性，浏览器仍然会去加载这个图像。
解决方法：修改html的结构，在img标签中添加新的属性，把src属性的值指向占位图片，添加data-original属性，让其指向真正的图像地址。
例如：<img data-original=“img/example.jpg” src=“img/grey.gif”>

这样我们就需要判断一下，我们究竟还要不要使用这个插件。 ## 使用： 1. 必须按照这种结构才有实际作用，需要对输出进行定义。 2. 可以节约服务器资源，并且有较好的用户体验。 3. 如果图片很大，当用户滚动到目标位置，需要较长时间下载。 ## 不使用： 1. 增加服务器压力，浪费系统资源。 究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一个img标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。 ## 如何使用： 如何使用这个插件呢？ 第一步：加载相关文件。 很明显，你要加载jquery和这个插件。你可以使用以下代码，加载这几个文件：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

第二步：定义图片结构。 按照官方的建议，定义你的img结构：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

第三步：触发这个插件，生效。 激活以下，你就可以在目标中使用了。

 $("img.lazy").lazyload();

高级使用方法：

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当javascript执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持javascript的选项，那么我们的这个图像就无法显示出来。也就是说，没有javascript的支持，我们的图像就无法显示出来。

应对这个问题，我们需要引入noscript标签。大体思路如下：用noscript包含真实的图像位置，当浏览器不支持javascript，直接显示图像。对现有图像，隐藏处理，使用show（）方法触发显示。这样，如果浏览器不支持javascript，我们自定义的img就不会出现，而显示noscript里面的图像。具体实现代码如下：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
.lazy {
  display: none;
}
$("img.lazy").show().lazyload();

提前加载

默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。

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

threshold这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。 ### 自定义触发事件 默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。

$("img.lazy").lazyload({ 
    event : "click"
});

自定义显示效果

默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置effect属性，来控制显示图片的效果。例如

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

fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： [effect demo page](http://www.appelsiini.net/projects/lazyload/enabled_fadein.html) ### 把图像插入某个容器 大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用container属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果： [vertical](http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html)

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({         
     container: $("#container")
});

加载不可见图像

有部分图像是不可见的，我们对其加上类似display：none等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要它加载不可见图像，我们需要使用skip_invisible属性，对其赋予false

$(“img.lazy”).lazyload({
    skip_invisible : false
});

官方说明：http://www.appelsiini.net/projects/lazyload

今天为了做一个模板，来收集幻灯片插件，最终确定了两款比较合适的。coin-slider和nivoslider，为此，研究了一下午，从各个方面来实验这两款插件，究竟哪款比较适合、比较好。

当然，聪明的你看题目就已经知道了。我必须要吐槽一下nivoslider这个jquery插件。这两款插件，在看官方的demo时，这个插件的效果要比coin-slider好一些。看了一下教程，可以自定义的参数较多，貌似功能要更强大一下。于是我就首先研究了一下这款插件的使用方法。由于网上教程比较少，大部分都是直接复制的官方教程，我就直接拿官方的demo代码来看了。这一看，直接晕死。加载了N个css文件，以及各种图片文件，当场晕死。demo里面的代码，也是很多很乱，不是怕多、乱的代码，就怕引用的各种文件各种效果的叠加，分析起来累死个人。

干脆自己按照步骤，自己写个小demo，看一下这款插件的易用性怎么样。按照官方的步骤，写好了图片链接，加载了需要的javascript文件等。打开一看，立刻没有了官方demo的美观和强大，上面的翻页等，都是需要css定义，这个暂时没有管理，所以难看就难看吧。图片切换也算正常，不正常的地方就是，在某个地方，出现了下一张图片的一大堆图片块。这种切换的原理很简单，生成很多div，每个div用css中的background-position属性，把整体的图片切成块，然后对每块进行透明度等的变化，显示的效果就是你看到的那种。但是现在，在旁边出现了一堆块都是乱的，直接无语。具体什么情况，我已经删了，也不截图了。估计是某块css没有定义好，当我打开官方demo的css时，又怵头了，这么多，这么乱的代码。功能的强大，必定面临使用的难度提升，估计这个是给专家级用户使用的，我等小白还是趁早溜走吧。研究了两三个小时，无疾而终。转身向coin-slider走去。

先在网上搜索一下相关资料，某前辈已经写出了一个教程，并且自己做了一个demo，下载下来看了下，效果挺好，代码挺少。同时也下载了官方的demo，打开官方demo，下面的说明，说的清清楚楚的。简而言之就是：加载必备组件=》你自己写图片链接=》执行那个操作。实事也是如此，可能我之前研究nivoslider，而coin-slider和它的原理和操作类似，所以我很快就上手并且做出了自己想要的效果。下面来依次讲解：

1，加载必备组件

这个coin-slider是jquery的一个插件，当然离不开jquery了。所以我们要加载三个项目：jquery、coin-slider和coin-slider-styles.css这三个。后面两个就是这个插件包，最后的那个css文件，是用来格式化幻灯片的相关样式。我估计nivoslider就是因为缺少了一个这个，所以才导致的乱，也有可能是我没有发现这个东西。代码如下：

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

2，编写你的图片链接

我们首先需要指定一个带有id的div标签，这样在第三步执行的时候，插件才能找到我们想要播出的图片。它的图片的写法，也有几个特点，就是如果你想点击图片跳转到某链接，在外面加上a标签；在img标签后面，新建一个span标签，里面的内容，将会作为图片的说明文字出现。直接看代码：

<div id=”coin-slider”>
    <a href=”#” >
        <img src=”images/walle.jpg” >
        <span>
            Description for nem<br />oDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemo
        </span>
    </a>
    <a href=”#111”>
        <img src=’images/nemo.jpg’ > //加载的图片
        <span> //图片对应的说明
            Description for nemo
        </span>
    </a>
</div>

这个代码的大体框架,是我从官方的demo中提取出来的,这里我又要吐槽一下了,官方的demo文件,写的实在是太不规范了，html标签都用的是大写，而且从上面的img的src就可以看出来，他们竟然用了单引号！css文件里也是这样，患有代码强迫症的潜行者m，花了好几分钟，才把大部分代码变成小写，添加合适的换号，真无语。看了一下开发时间，2010年的作品，那时候xhtml应该普及了，为什么还用大写的写法，无语了。

3，执行操作

确保上面两个步骤完成之后，就需要触发它的方法，来实现幻灯片的功能了。方法当然是

    $(document).ready(function() {
        $(‘#coin-slider’).coinslider({ height:248 }); //使用各种参数配置来扩充他的功能
    });

当然，你也可以使用window.onload，那样可以确保幻灯片图片被完全下载下来之后，再出现幻灯片。

很显然，还可以配置很多参数，让幻灯片的功能更加强大。在上面的代码中，我添加了一个参数height：248，因为我的照片高度是248px。下面介绍一下其他参数，我在官方注释后面，小小的翻译了一下，不准确的话，还望见谅。

width: 565, // width of slider panel 幻灯片的宽度
height: 290, // height of slider panel 幻灯片的高度
spw: 7, // squares per width 幻灯片切出小方框的宽度
sph: 5, // squares per height 幻灯片切出小方框的高度
delay: 3000, // delay between images in ms 切换图片的时间，毫秒单位
sDelay: 30, // delay beetwen squares in ms 小方框变化的时间，毫秒单位（这两个尽量不要改，官方说改了容易出现过度问题）
opacity: 0.7, // opacity of title and navigation 图片下面的说明文字背景的透明度
titleSpeed: 500, // speed of title appereance in ms 标题消失的速度，毫秒单位
effect: ‘’, // random, swirl, rain, straight 变换样式，随机，漩涡，下雨，连续（自己试试就知道效果）
navigation: true, // prev next and buttons 是否显示前个、后个按钮
links : true, // show images as links  是否把图片当做一个链接
hoverPause: true // pause on hover 你把鼠标放上去的时候，图片是否继续变化

我们只需要像这样，填上自己定义的参数即可：

$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });

4，高级用法

在具体的使用过程中，它的默认样式，肯定不符合我的模板需求，所以我需要对它进行更加细致的修正。那就是通过css，官方的css文件里，你可以直接修改，你也可以新建css文件，对它进行定义。在火狐浏览器中，可以方便观看这个插件生成了些什么div标签，以及相应的id和class。既然你是高级用户，当然难不倒你，我只是在这里提一个思路，具体的就要靠你自己去修改了。

最后，打包一下本教程的资源，放上来。点击下载：coin-slider