基于jquery的一個(gè)圖片hover的插件

更新時(shí)間：2010年04月24日 13:34:57 作者：

很簡單有趣的效果，邏輯很清楚，代碼也簡單，是練手的好東東。

先來看看使用方法。
演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML文件中這樣寫：

 
<div class="jcutter"> 
<img src="1.jpg" alt=""> 
<div class="jcutter-content"> 
這是點(diǎn)開后的頁面的內(nèi)容 
</div> 
　　　　　</div> 

調(diào)用的話需要這樣寫：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
options={ 
'speedIn':600, //圖片進(jìn)入時(shí)候的動(dòng)畫速度 
'speedOut':400, //圖片退出時(shí)候的動(dòng)畫速度 
'easeIn':'easeOutBounce', //圖片進(jìn)入時(shí)候的動(dòng)畫效果，這個(gè)效果需要easing庫 
'easeOut':'' //圖片退出時(shí)候的動(dòng)畫效果 
} 
$('.jcutter').jCutter(options); 
}) 

當(dāng)然要引用這個(gè)插件才行。下面我們來講解這個(gè)插件的編寫。
一、jQuery插件編寫的方法
寫一個(gè)jQuery插件，首先需要一些必要的結(jié)構(gòu)，如下所示：

復(fù)制代碼代碼如下:

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

這個(gè)結(jié)構(gòu)和我們最終的結(jié)果有些出入，但是大體上jQuery插件的結(jié)構(gòu)就是如此。
首先要寫成一個(gè)閉包的形式，不污染命名空間，然后根據(jù)jQuery提供的接口來編寫，這里的jCutter可以改成你自己插件的名字。$.extend是一個(gè)非常有趣的函數(shù)，他會(huì)將第一個(gè)和第二個(gè)參數(shù)合并，對(duì)于兩個(gè)參數(shù)中都出現(xiàn)的值，用后者代替前者。
二、開始編寫
在這個(gè)例子中，因?yàn)橐玫竭x擇器，所以我們做一些修改，結(jié)構(gòu)改成如下的樣子。

復(fù)制代碼代碼如下:

 
(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添加一個(gè)類，這樣我們操作起來方便一些。通過上面的結(jié)構(gòu)我們可以清楚的看到程序的邏輯，init()用來進(jìn)行一些初始化的任務(wù)，然后用generate()來生成需要的結(jié)構(gòu)，最后用cutter()來完成動(dòng)畫和事件效果。
三、初始化程序
需要初始化的東西主要是一些參數(shù)，然后找到需要進(jìn)行修改的圖片，最后進(jìn)行渲染。都是一些比較簡單的操作。

復(fù)制代碼代碼如下:

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

四、生成需要的結(jié)構(gòu)
這個(gè)效果的原理就是：我們把圖片復(fù)制到四個(gè)層里面，然后將這四個(gè)層相對(duì)定位，再把這個(gè)圖拼起來，這樣動(dòng)畫效果就能達(dá)到了。

復(fù)制代碼代碼如下:

 
that.generate = function(){ 
var w = that.node.width() / 2; 
var h = that.node.height() / 2; 
that.imga = []; 
for (var i = 0; i < 4; 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(); 
}; 

這里的代碼也比較簡單，首先得到外面層的寬度和高度，然后計(jì)算，再生成四個(gè)層，給四個(gè)層寫入相應(yīng)的位置代碼，需要注意的是，外面層的position屬性要設(shè)置為relative，要么里面的層就無法準(zhǔn)確定位了。這里其實(shí)可以直接寫入相應(yīng)的html代碼，但是為了表現(xiàn)清晰，我們采用了比較明朗的寫法，先生成一個(gè)div，然后賦給他一些css屬性。
五、添加動(dòng)畫效果，注冊(cè)事件處理程序
完成了結(jié)構(gòu)的任務(wù)，下一步就是給他添加動(dòng)畫效果了，我們只需要將這四個(gè)圖層在鼠標(biāo)經(jīng)過的時(shí)候移出外面的層，然鼠標(biāo)離開的時(shí)候再復(fù)位就可以了，寫起來也是非常的簡單，看代碼：

復(fù)制代碼代碼如下:

 
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()函數(shù)的作用就是如果在事件再次出發(fā)的時(shí)候，上一次的動(dòng)畫還在進(jìn)行中的話，就終止動(dòng)畫，這樣效果更加自然一些。that.easeIn和that.easeOut參數(shù)是用來設(shè)置動(dòng)畫的模式的，默認(rèn)的jQuery庫只有兩種簡單的線性庫，可以下載jQuery.easing庫來添加更多絢麗的效果。
這樣就完成了這個(gè)插件的編寫，完整的代碼如下：

復(fù)制代碼代碼如下:

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