基于jquery的一個圖片hover的插件

更新時間：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"> 
這是點開后的頁面的內(nèi)容 
</div> 
　　　　　</div> 

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

復制代碼代碼如下:

 
$(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插件的結構就是如此。
首先要寫成一個閉包的形式，不污染命名空間，然后根據(jù)jQuery提供的接口來編寫，這里的jCutter可以改成你自己插件的名字。$.extend是一個非常有趣的函數(shù)，他會將第一個和第二個參數(shù)合并，對于兩個參數(shù)中都出現(xiàn)的值，用后者代替前者。
二、開始編寫
在這個例子中，因為要用到選擇器，所以我們做一些修改，結構改成如下的樣子。

復制代碼代碼如下:

 
(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()來完成動畫和事件效果。
三、初始化程序
需要初始化的東西主要是一些參數(shù)，然后找到需要進行修改的圖片，最后進行渲染。都是一些比較簡單的操作。

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
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ā)的時候，上一次的動畫還在進行中的話，就終止動畫，這樣效果更加自然一些。that.easeIn和that.easeOut參數(shù)是用來設置動畫的模式的，默認的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 < 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); 

很簡單有趣的效果，邏輯很清楚，代碼也簡單，是練手的好東東。
打包下載地址 http://www.fzitv.net/jiaoben/26031.html

您可能感興趣的文章:

jquery 3D球狀導航的文章分類
分類標題呈現(xiàn)3D球狀效果，點擊分類標題的時候，會彈出這個分類對應的推薦文章列表。
2010-07-07
CSS3,HTML5和jQuery搜索框集錦
小編收集了13個有用的CSS3,HTML5和jQuery搜索表單腳本來幫助大家從頭開始創(chuàng)建一個搜索框。希望能夠幫助到大家，讓我們一起來看看吧！
2014-12-12
jquery實現(xiàn)折疊菜單效果【推薦】
本文主要介紹了jquery實現(xiàn)折疊菜單效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
讀jQuery之二（兩種擴展）
上一篇分析了jQuery對象的組成，這篇分析下它的extend方法。
2011-06-06
jQuery bind事件使用詳解
很久沒有寫東西了，今天在工作中碰見問題才發(fā)現(xiàn)。以后得多逼自己多抽時間來寫寫自己的東西，也順便和大家分享一下自己在工作中碰見的問題。
2011-05-05
淺談jQuery中事情的動態(tài)綁定
下面小編就為大家?guī)硪黄獪\談jQuery中事情的動態(tài)綁定。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
jQuery+css3動畫屬性制作獵豹瀏覽器寬屏banner焦點圖
本文給大家分享的是使用jQuery結合CSS3制作的仿獵豹瀏覽器寬屏banner焦點圖特效，代碼很簡單，效果卻非常棒，而且兼容各大瀏覽器，這里推薦給大家，有需要的小伙伴參考下。
2015-03-03
jQuery中設置form表單中action值的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query中設置form表單中action值的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法
這篇文章主要介紹了jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法,可實現(xiàn)點擊選區(qū)后出現(xiàn)選區(qū)收縮、滾動消失的效果,涉及jquery結合Ajax與數(shù)學運算實時操作頁面元素的相關技巧,需要的朋友可以參考下
2015-08-08
基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
自動完成功能是指：類似百度搜索之類的輸入一個詞的一部分后就自動提示，然后用戶可以選擇，不需要再輸入剩余部分。
2011-08-08