基于jquery的一个图片hover的插件

先来看看使用方法。
演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML文件中这样写：

<div class=”jcutter”>
<img src=”1.jpg” alt=””>
<div class=”jcutter-content”>
这是点开后的页面的内容
</div>
　　　　　</div>

调用的话需要这样写：

$(document).ready(function(){
options={
‘speedIn’:600, //图片进入时候的动画速度
‘speedOut’:400, //图片退出时候的动画速度
‘easeIn’:’easeOutBounce’, //图片进入时候的动画效果，这个效果需要easing库
‘easeOut’:” //图片退出时候的动画效果
}
$(‘.jcutter’).jCutter(options);
})

当然要引用这个插件才行。下面我们来讲解这个插件的编写。
一、jQuery插件编写的方法
写一个jQuery插件，首先需要一些必要的结构，如下所示：

(function($){
$.fn.jCutter = function(o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: ”,
easeOut: ”
}, o || {});
};
})(jQuery);

这个结构和我们最终的结果有些出入，但是大体上jQuery插件的结构就是如此。
首先要写成一个闭包的形式，不污染命名空间，然后根据jQuery提供的接口来编写，这里的jCutter可以改成你自己插件的名字。$.extend是一个非常有趣的函数，他会将第一个和第二个参数合并，对于两个参数中都出现的值，用后者代替前者。
二、开始编写
在这个例子中，因为要用到选择器，所以我们做一些修改，结构改成如下的样子。

(function($){
$.jCutter = function(node, o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: ”,
easeOut: ”
}, o || {});
var that = this;
that.init = function(){
};
that.generate = function(){
};
that.cutter = function(){
};
that.init();
};
$.fn.jCutter = function(o){
return this.each(function(i){
$.jCutter(this,o);
});
};
})(jQuery);

$.jCutter的含义是给jQuery添加一个类，这样我们操作起来方便一些。通过上面的结构我们可以清楚的看到程序的逻辑，init()用来进行一些初始化的任务，然后用generate()来生成需要的结构，最后用cutter()来完成动画和事件效果。
三、初始化程序
需要初始化的东西主要是一些参数，然后找到需要进行修改的图片，最后进行渲染。都是一些比较简单的操作。

that.init = function(){
that.node = $(node);
that.img = that.node.find(‘img’);
that.speedIn = o.speedIn;
that.speedOut = o.speedOut;
that.easeIn = o.easeIn;
that.easeOut = o.easeOut;
that.generate();
that.cutter();