使用 jquery.easing.js 增强动画过渡效果

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&gt;
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script&gt;

然后再在引入代码下面编写调用的 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 的动画方法。只需要按照官方对应的格式去写就可以,这个插件相当于扩充了官方的过渡效果样式

插件的参数

这个插件有三个参数:durationeasingcomplete

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 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭。 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目前寻找的成果来说,找到了两个比较不错的 jQuery 插件:jScrollPane mCustomScrollbar 。关于前者,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大。效果在几年前非常不错,但是放在现在就不好说了。所以我选择了后者: mCustomScrollbar。下图是两者官方示例的简单对比:

jScrollPane 和 mCustomScrollbar 的对比

本文就是介绍如何使用这个插件,大部分的内容,是根据mCustomScrollbar 官方的介绍页面进行一个翻译,但将其部分内容修改,同时增加一些自己在使用中的一些技巧。

关于 mCustomScrollbar

mCustomScrollbar 使用了 jQuery UI,可以通过灵活的通过 CSS 定义你的滚动条。同时可以定义垂直的和水平的滚动条,并且通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,滚动的过程中,还可以缓冲滚动使得滚动更加的平滑。可以自动调整滚动条的位置并且可以定义滚动到的位置等。总之,你知道非常好用就好了。

mCustomScrollbar 效果图

点击这里可以下载这个 mCustomScrollbar

点击这里可以查看这个mCustomScrollbar的Demo

如何使用 mCustomScrollbar

首先,先请你下载作者提供的插件包,里面包含了所有的插件文件和一些例子。以下的四个文件时必须要上传到你的服务器上的:jquery.mCustomScrollbar.js, jquery.mousewheel.min.js, jquery.mCustomScrollbar.css and mCSBbuttons.png。_

第一步:加载插件的样式文件。

可以使用以下代码,引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
**第二步:加载必须的 JS 文件。** 需要加载的文件有如下几个:jQuery、jQuery UI, jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js。jQuery 和 jQuery UI 是必须的, jquery.mousewheel.min.js 是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。要注意的是,加载顺序也要按照上面说的来,如果不注意加载的顺序,可能会导致失败,原因请看本人的:[网页中代码的顺序是不可忽略的细节](http://www.qianxingzhem.com/post-1539.html)。 你可以使用如下代码加载:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>
你可以把这段代码放在文档的底部来缩短加载网页内容的时间,原因也可以在上面介绍的那篇文章中看到。这里的加载的代码使用了 Google 的 CDN 加速服务来获得 jQuery 和 jQuery UI,这样的有好处也有坏处。在插件包中,包含了 jQuery 和 jQuery UI(这个 UI 被作者精简了,包含这个插件必须的模块,大小只有 43KB),你当然可以把插件包中的这两个库上传到服务器上使用。它们在插件包的 jquery 目录里面。 如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话,更推荐采用下面的写法(以 Google 为例):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>
如果这样写,它会在 库 加载完成之后,做一个判断:**如果没有成功加载这个库,那么就生成一段新的 Javascript 引用代码,用来引用本地的文件**。这样,如果外面的库无法使用,就会加载本地的库,而不会导致插件无法使用。推荐这种写法。 **第三步:对 内容块 激活这个插件**
<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>
这里我使用了(function($){ ... })(jQuery);来包裹 jQuery 代码,这是为了避免 jQuery 和其他的 库 在使用中产生冲突。我还用了window load ($(window).load()) 来激活我的插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载我的插件。当然,你也可以使用常规的 jQuery 代码加载方法,但是你要明白 ready 和 load 方法之间的不同。一般的 jQuery 代码加载方法如下:
<script>
    (function($){
        $(document).ready(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>
**第四步:在页面中添加内容和样式** 没有内容当然谈不上出现这个插件的效果了。就上述示例代码来说,我们应该在页面中定义一个 class 为 content 的 内容块。并添加一些测试数据:
<div class=".content">
    <p>测试数据.......还有很多很多</p>
</div>
这样当然不算完,**自定义滚动条的样式,必须要出现滚动条才可以**。所以我们还要对这个块加上一些 CSS 来让它出现滚动条,否则是没有效果的。加上的样式很简单,就是定义一个宽或者高或者宽高都定义,然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高,就会出现一个滚动条。例:
width:100px;height:100px;overflow:auto;
完成上述的操作之后,带有滚动条的内容块的滚动条,就变成这个插件的默认样式了。 [![使用 mCustomScrollbar 之后的效果图](http://qxzm-img.b0.upaiyun.com/blog/2012/12/1602/scroll2.png "scroll")](http://qxzm-img.b0.upaiyun.com/blog/2012/12/1602/scroll2.png) 官方的默认样式相对于白色的对比度不高,所以为了显示的明显一点,我加了一个深色的背景色。 当然还有很多参数开扩展插件的功能,这些参数的使用方法过后再讲。先来说说上面用到的这些文件的用途和简单介绍: **jQuery**:这个插件的必备库,你懂。 **jQuery UI**:扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。 **jquery.mousewheel.min.js**:这是 [Brandon Aaron](http://brandonaaron.net) 编写的一个伟大的只有2kb的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。 **jquery.mCustomScrollbar.js**:这是我们的插件主文件。在插件包的 minified 你可以找到它的压缩版。 **jquery.mCustomScrollbar.css**: 这个 CSS 文件是让我们来定义边栏用的。你可以在这个文件中定义你的边栏,当然你可以在其他的 CSS 文件中定义,要注意的是,你要用 CSS 中的顺序,其中的优先级关系来覆盖这个文件中的定义。否则可能会无效,关于网页中代码顺序,详情可以看一下 [潜行者m](http://www.qianxingzhem.com) 的这篇文章:[网页中代码的顺序是不可忽略的细节](http://www.qianxingzhem.com/post-1539.html)。 **mCSB_buttons.png**: 这个 png 图片文件,包含了向上向下向左向右滚动的按钮。可以使用 CSS sprites 技术,来使用这个图片中的相应按钮。插件包中包含了这个图片的 PSD 源文件(sources/mCSB_buttons.psd ),你可以根据自己的需求自定义。 完成这些,你已经可以正确的使用这个插件,并且看到了相应的效果。但是没有人愿意使用如此强大的插件来实现这个默认的效果,下面来说一下进阶的使用。 ## mCustomScrollbar 的参数介绍 这个插件的功能巨大,所以参数也很多,参数值当然更多。在介绍参数的时候,我想先为新手介绍两种参数值的写法,分别是直接的和合并的。 我 们平时接触的插件用的参数,都是直接跟着参数写上参数值,这个比较直观简单。在这个插件中,参数值太多,所以把一些参数合并起来写。例如下面要介绍到的 scrollButtons 这个参数,它下面有四个属性:enable、scrollType、scrollSpeed、scrollAmount,这四个属性也分别有自己的值,来 实现相应的功能。如果再加上其他的参数,那么我们应该这样写:
$("#main").mCustomScrollbar({
 scrollButtons:{
 enable:false,
 scrollType:"continuous",
 scrollSpeed:20,
 scrollAmount:40
 },
 horizontalScroll:false,
 });
一定要注意闭合的括号和语句之间的逗号,新手可能会因为不小心,没有严格的按照这个规则写导致插件无法运行。好,下面我们介绍详细的参数。 * **set_width:false** | 设置你内容的宽度 值可以是像素或者百分比 * **set_height:false** | 设置你内容的高度 值可以是像素或者百分比 * **horizontalScroll:Boolean** | 是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false * **scrollInertia:Integer** | 滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑) * **scrollEasing:String** | 滚动动作类型 查看 [jquery UI easing](http://view.jqueryui.com/formcontrols/demos/effect/easing.html) 可以看到所有的类型 * **mouseWheel:String/Boolean** | 鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能 * **mouseWheelPixels:Integer** | 鼠标滚动中滚动的像素数目 值为以像素为单位的数值 * **autoDraggerLength:Boolean** | 根据内容区域自动调整滚动条拖块的长度 值:true,false * **scrollButtons:{ enable:Boolean }** | 是否添加 滚动条两端按钮支持 值:true,false * **scrollButtons:{ scrollType:String }** | 滚动按钮滚动类型 值:"continuous"(当你点击滚动控制按钮时断断续续滚动) "pixels"(根据每次点击的像素数来滚动) [点击这里可以看到形象的例子](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html) * **scrollButtons:{ scrollSpeed:Integer }** | 设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动 * **scrollButtons:{ scrollAmount:Integer }** | 设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素 * **advanced:{ updateOnBrowserResize:Boolean }** | 根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小 * **advanced:{ updateOnContentResize:Boolean }** | 自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能 * **advanced:{ autoExpandHorizontalScroll:Boolean }** | 自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 [可以看Demo](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html) * **advanced:{ autoScrollOnFocus:Boolean }** | 是否自动滚动到聚焦中的对象 例如表单使用类似TAB键那样跳转焦点 值:true false * **callbacks:{ onScrollStart:function(){} }** | 使用自定义的回调函数在滚动时间开始的时候执行 [具体请看Demo](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/callbacks_example.html) * **callbacks:{ onScroll:function(){} }** | 自定义回调函数在滚动中执行 Demo 同上 * **callbacks:{ onTotalScroll:function(){} }** | 当滚动到底部的时候调用这个自定义回调函数 Demo 同上 * **callbacks:{ onTotalScrollBack:function(){} }** | 当滚动到顶部的时候调用这个自定义回调函数 Demo 同上 * **callbacks:{ onTotalScrollOffset:Integer }** | 设置到达顶部或者底部的偏移量 像素单位 * **callbacks:{ whileScrolling:function(){} }** | 当用户正在滚动的时候执行这个自定义回调函数 * **callbacks:{ whileScrollingInterval:Integer }** | 设置调用 whileScrolling 回调函数的时间间隔 毫秒单位 下面是所有参数的列表和它们的默认值
$(".content").mCustomScrollbar({
  set_width:false,
  set_height:false,
  horizontalScroll:false,
  scrollInertia:550,
  scrollEasing:"easeOutCirc",
  mouseWheel:"auto",
  autoDraggerLength:true,
  scrollButtons:{
    enable:false,
    scrollType:"continuous",
    scrollSpeed:20,
    scrollAmount:40
  },
  advanced:{
    updateOnBrowserResize:true,
    updateOnContentResize:false,
    autoExpandHorizontalScroll:false,
    autoScrollOnFocus:true
  },
  callbacks:{
    onScrollStart:function(){},
    onScroll:function(){},
    onTotalScroll:function(){},
    onTotalScrollBack:function(){},
    onTotalScrollOffset:0,
    whileScrolling:false,
    whileScrollingInterval:30
  }

mCustomScrollbar 的方法

update

用法:$(selector).mCustomScrollbar(“update”);

调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化(例如 通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等)

下面是例子:

$(“.content .mCSB_container”).append(“<p>New content here…</p>”);
$(“.content”).mCustomScrollbar(“update”);

$(“.content .myImagesContainer”).append(“<img src=’myNewImage.jpg’ />”);
$(“.content .myImagesContainer img”).load(function(){
$(“.content”).mCustomScrollbar(“update”);
});

$(“#content-1”).animate({height:800},”slow”,function(){
$(this).mCustomScrollbar(“update”);
});

当新内容完全加载或者动画完成之后,update 方法一直被调用。

scrollTo

用法:$(selector).mCustomScrollbar(“scrollTo”,position);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串(例如 “#element-id”,“bottom” 等)描述或者是一个数值(像素单位)。下面的例子将会滚动到最下面的对象

$(“.content”).mCustomScrollbar(“scrollTo”,”last”);

scrollTo 方法的参数

  • $(selector).mCustomScrollbar(“scrollTo”,String); | 滚动到某个对象的位置,字符串型的值可以是 id 或者 class 的名字
  • $(selector).mCustomScrollbar(“scrollTo”,”top”); | 滚动到顶部(垂直滚动条)
  • $(selector).mCustomScrollbar(“scrollTo”,”bottom”); | 滚动到底部(垂直滚动条)
  • $(selector).mCustomScrollbar(“scrollTo”,”left”); | 滚动到最左边(水平滚动条)
  • $(selector).mCustomScrollbar(“scrollTo”,”right”); | 滚动到最右边(水平滚动条
  • $(selector).mCustomScrollbar(“scrollTo”,”first”); | 滚动到内容区域中的第一个对象位置
  • $(selector).mCustomScrollbar(“scrollTo”,”last”); | 滚动到内容区域中的最后一个对象位置
  • $(selector).mCustomScrollbar(“scrollTo”,Integer); | 滚动到某个位置(像素单位)
    scrollTo 方法还有两个额外的选项参数

moveDragger: Boolean | 滚动滚动条的滑块到某个位置像素单位,值:true,flase。例如:$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });

callback:Boolean | 执行回调函数当 scroll-to 完成之后,值:true,false 例如:$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });

disable

用法:$(selector).mCustomScrollbar(“disable”);

调用 disable 方法去使滚动条不可用。如果想使其重新可用,调用 update方法。disable 方法使用一个可选参数(默认 false)你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。例如:

$(“.content”).mCustomScrollbar(“disable”,true);

可以看一些使用 disable 的例子

destroy

用法:$(selector).mCustomScrollbar(“destroy”);

调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 destroy 的例子

mCustomScrollbar 的原理

通过潜行者m对这些插件的使用,对这些插件的实现原理也做了一些分析。原理就是这样的:

首先获取要修改滚动条样式的内容区块,然后使用 CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS 做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式,使用 Javascript 相应鼠标的滚动事件,产生滚动下滑的效果。

明白了这点,下面我们就可以看一下滚动条的结构,然后使用 CSS 对其进行定义了。

定义滚动条外观

先了解一下滚动条的 HTML 结构,下面是默认的垂直滚动条结构:

<div class=”content mCustomScrollbar _mCS_1”>
<div class=”mCustomScrollBox”>
<div class=”mCSB_container”>
<!— your long content here… —>
</div>
<div class=”mCSB_scrollTools”>
<a class=”mCSB_buttonUp”></a>
<div class=”mCSB_draggerContainer”>
<div class=”mCSB_dragger ui-draggable”>
<div class=”mCSB_dragger_bar”></div>
</div>
<div class=”mCSB_draggerRail”></div>
</div>
<a class=”mCSB_buttonDown”></a>
</div>
</div>
</div>

mCSB_buttonUp 和 mCSB_buttonDown 这两个 a 标签只有当你启用了 scroll buttons 功能的时候,才可用。下面这个结构是 水平滚动条 的结构:

<div class=”content mCustomScrollbar _mCS_1”>
<div class=”mCustomScrollBox mCSB_horizontal”>
<div class=”mCSB_container”>
<!— your long content here… —>
</div>
<div class=”mCSB_scrollTools”>
<a class=”mCSB_buttonLeft”></a>
<div class=”mCSB_draggerContainer”>
<div class=”mCSB_dragger ui-draggable”>
<div class=”mCSB_dragger_bar”></div>
</div>
<div class=”mCSB_draggerRail”></div>
</div>
<a class=”mCSB_buttonRight”></a>
</div>
</div>
</div>

知道这些之后,我们就可以来定义滚动条样式了,对于同一页面多个滚动条,官方推荐如下的写法:

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
/ 1st scrollbar dragger style… /
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
/ 2nd scrollbar dragger style… /
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
/ 3rd scrollbar dragger style… /
}

为了更加直观的看到要定义的滚动条区域,官方给出了一张非常形象的图片

mCustomScrollbar 的滚动条结构图

根据这张图片,就可以很容易的定义滚动条的样式了。

更加进阶的使用

修改浏览器的滚动条

单单是修改某个内容区域的边栏已经无法满足我们的需求了,我们还想修改浏览器边栏应该怎么办?这当然是无法用 Javascript 来实现,因为浏览器是一个容器,Javascript 是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。面对这个问题,解决方法很简单,就是虚拟出来一个浏览器窗口。

我们先添加一个 div 块,然后对这个 div 添加 position:absolute 属性,然后就可以指定它的 width 和 height 为 100% 或者稍微小点的 98%。这样,这个 div 就扩充到了整个浏览器界面,这样就可以被当做是一个网页的 body。然后加上 overflow:auto 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

关于更多的进阶使用和技巧,欢迎跟我交流,也可以关注本文,会在后面陆续添加。

Jquery.lazyload.js究竟要怎么使用

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

使用jquery插件coin-slider轻松打造幻灯片教程

今天为了做一个模板,来收集幻灯片插件,最终确定了两款比较合适的。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