A picture hover plug-in based on jquery_jquery

Let’s take a look at how to use it first.
Demo addresshttp://demo.jb51.net/js/jCutter_jquery/demo.htm
The HTML file reads:

Copy code The code is as follows:

This is the content of the page after clicking it

　　

To call, you need to write like this:

Copy the code The code is as follows:

$(document).ready(function(){
options={
'speedIn':600, //Animation speed when the picture enters
'speedOut':400, //Animation when the picture exits Speed
'easeIn':'easeOutBounce', //Animation effect when the picture enters. This effect requires the easing library
'easeOut':'' //Animation effect when the picture exits
}
$('.jcutter').jCutter(options);
})

Of course you have to quote this plug-in. Let's explain how to write this plug-in.
1. How to write a jQuery plug-in
To write a jQuery plug-in, you first need some necessary structures, as shown below:

Copy code The code is as follows:

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

This structure is slightly different from our final result, but in general the structure of the jQuery plug-in is like this.
First write it in the form of a closure without polluting the namespace, and then write it according to the interface provided by jQuery. The jCutter here can be changed to the name of your own plug-in. $.extend is a very interesting function. It combines the first and second parameters. For values ​​that appear in both parameters, the latter replaces the former.
2. Start writing
In this example, because we need to use a selector, we make some modifications and change the structure to the following.

Copy code The code is as follows:

(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 The meaning is to add a class to jQuery so that we can operate more conveniently. Through the above structure, we can clearly see the logic of the program. init() is used to perform some initialization tasks, then generate() is used to generate the required structure, and finally cutter() is used to complete animation and event effects.
3. Initialization procedure
The things that need to be initialized are mainly some parameters, then find the picture that needs to be modified, and finally render it. They are all relatively simple operations.

Copy code The code is as follows:

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();
};

4. Generate the required structure
The principle of this effect is: we copy the picture into four layers, then position the four layers relatively, and then put the picture together, so that the animation effect can be achieved .

Copy code The code is as follows:

that.generate = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.imga = [];
for (var i = 0; i that.imga[i] = document.createElement('div');
that.imga[i] = $(that.imga[i]);
that.imga[i].css({
'position': 'absolute',
'z-index': '2',
'width': w,
'height': h,
'background': 'url("' that.img.attr("src") '") no-repeat'
});
$(that.node).append(that.imga[i]);
}
that.imga[0].css({
'left': '0px',
'top': '0px'
});
that.imga[1].css({
'right': '0px',
'top': '0px',
'background-position': '-' w 'px' ' 0px'
});
that.imga[2].css({
'left': '0px',
'bottom': '0px',
'background-position': '0px' ' -' h 'px'
});
that.imga[3].css({
'right': '0px',
'bottom': '0px',
'background-position': '-' w 'px ' '-' h 'px'
});
that.img.remove();
};

这里的代码也比较简单，首先得到外面层的宽度和高度，然后计算，再生成四个层，给四个层写入相应的位置代码，需要注意的是，外面层的position属性要设置为relative，要么里面的层就无法准确定位了。这里其实可以直接写入相应的html代码，但是为了表现清晰，我们采用了比较明朗的写法，先生成一个div，然后赋给他一些css属性。
五、添加动画效果，注册事件处理程序
完成了结构的任务，下一步就是给他添加动画效果了，我们只需要将这四个图层在鼠标经过的时候移出外面的层，然鼠标离开的时候再复位就可以了，写起来也是非常的简单，看代码：

复制代码 代码如下:

that.cutter = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.node.hover(function(){
that.imga[0].stop().animate({
'left': '-' w,
'top': '-' h
}, that.speedOut, that.easeOut);
that.imga[1].stop().animate({
'right': '-' w,
'top': '-' h
}, that.speedOut, that.easeOut);
that.imga[2].stop().animate({
'left': '-' w,
'bottom': '-' h
}, that.speedOut, that.easeOut);
that.imga[3].stop().animate({
'right': '-' w,
'bottom': '-' h
}, that.speedOut, that.easeOut);
}, function(){
that.imga[0].stop().animate({
'left': 0,
'top': 0
}, that.speedIn, that.easeIn);
that.imga[1].stop().animate({
'right': 0,
'top': 0
}, that.speedIn, that.easeIn);
that.imga[2].stop().animate({
'left': 0,
'bottom': 0
}, that.speedIn, that.easeIn);
that.imga[3].stop().animate({
'right': 0,
'bottom': 0
}, that.speedIn, that.easeIn);
})
};

.stop()函数的作用就是如果在事件再次出发的时候，上一次的动画还在进行中的话，就终止动画，这样效果更加自然一些。that.easeIn和that.easeOut参数是用来设置动画的模式的，默认的jQuery库只有两种简单的线性库，可以下载jQuery.easing库来添加更多绚丽的效果。
这样就完成了这个插件的编写，完整的代码如下：

复制代码 代码如下:

(function($){
$.jCutter = function(node, o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: '',
easeOut: ''
}, o || {});
var that = this;
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();
};
that.generate = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.imga = [];
for (var i = 0; i that.imga[i] = document.createElement('div');
that.imga[i] = $(that.imga[i]);
that.imga[i].css({
'position': 'absolute',
'z-index': '2',
'width': w,
'height': h,
'background': 'url("' that.img.attr("src") '") no-repeat'
});
$(that.node).append(that.imga[i]);
}
that.imga[0].css({
'left': '0px',
'top': '0px'
});
that.imga[1].css({
'right': '0px',
'top': '0px',
'background-position': '-' w 'px' ' 0px'
});
that.imga[2].css({
'left': '0px',
'bottom': '0px',
'background-position': '0px' ' -' h 'px'
});
that.imga[3].css({
'right': '0px',
'bottom': '0px',
'background-position': '-' w 'px ' '-' h 'px'
});
that.img.remove();
};
that.cutter = function(){
var w = that.node.width() / 2;
var h = that.node.height() / 2;
that.node.hover(function(){
that.imga[0].stop().animate({
'left': '-' w,
'top': '-' h
}, that.speedOut, that.easeOut);
that.imga[1].stop().animate({
'right': '-' w,
'top': '-' h
}, that.speedOut, that.easeOut);
that.imga[2].stop().animate({
'left': '-' w,
'bottom': '-' h
}, that.speedOut, that.easeOut);
that.imga[3].stop().animate({
'right': '-' w,
'bottom': '-' h
}, that.speedOut, that.easeOut);
}, function(){
that.imga[0].stop().animate({
'left': 0,
'top': 0
}, that.speedIn, that.easeIn);
that.imga[1].stop().animate({
'right': 0,
'top': 0
}, that.speedIn, that.easeIn);
that.imga[2].stop().animate({
'left': 0,
'bottom': 0
}, that.speedIn, that.easeIn);
that.imga[3].stop().animate({
'right': 0,
'bottom': 0
}, that.speedIn, that.easeIn);
})
};
that.init();
};
$.fn.jCutter = function(o){
return this.each(function(i){
$.jCutter(this,o);
});
};
})(jQuery);

很简单有趣的效果，逻辑很清楚，代码也简单，是练手的好东东。
打包下载地址 http://www.jb51.net/jiaoben/26031.html