基于jquery的一個(gè)圖片hover的插件
更新時(shí)間:2010年04月24日 13:34:57 作者:
很簡(jiǎn)單有趣的效果,邏輯很清楚,代碼也簡(jiǎn)單,是練手的好東東。
先來(lái)看看使用方法。
演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML文件中這樣寫(xiě):
<div class="jcutter">
<img src="1.jpg" alt="">
<div class="jcutter-content">
這是點(diǎn)開(kāi)后的頁(yè)面的內(nèi)容
</div>
</div>
調(diào)用的話需要這樣寫(xiě):
$(document).ready(function(){
options={
'speedIn':600, //圖片進(jìn)入時(shí)候的動(dòng)畫(huà)速度
'speedOut':400, //圖片退出時(shí)候的動(dòng)畫(huà)速度
'easeIn':'easeOutBounce', //圖片進(jìn)入時(shí)候的動(dòng)畫(huà)效果,這個(gè)效果需要easing庫(kù)
'easeOut':'' //圖片退出時(shí)候的動(dòng)畫(huà)效果
}
$('.jcutter').jCutter(options);
})
當(dāng)然要引用這個(gè)插件才行。下面我們來(lái)講解這個(gè)插件的編寫(xiě)。
一、jQuery插件編寫(xiě)的方法
寫(xiě)一個(gè)jQuery插件,首先需要一些必要的結(jié)構(gòu),如下所示:
(function($){
$.fn.jCutter = function(o){
o = $.extend({
speedIn: 300,
speedOut: 300,
easeIn: '',
easeOut: ''
}, o || {});
};
})(jQuery);
這個(gè)結(jié)構(gòu)和我們最終的結(jié)果有些出入,但是大體上jQuery插件的結(jié)構(gòu)就是如此。
首先要寫(xiě)成一個(gè)閉包的形式,不污染命名空間,然后根據(jù)jQuery提供的接口來(lái)編寫(xiě),這里的jCutter可以改成你自己插件的名字。$.extend是一個(gè)非常有趣的函數(shù),他會(huì)將第一個(gè)和第二個(gè)參數(shù)合并,對(duì)于兩個(gè)參數(shù)中都出現(xiàn)的值,用后者代替前者。
二、開(kāi)始編寫(xiě)
在這個(gè)例子中,因?yàn)橐玫竭x擇器,所以我們做一些修改,結(jié)構(gòu)改成如下的樣子。
(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è)類(lèi),這樣我們操作起來(lái)方便一些。通過(guò)上面的結(jié)構(gòu)我們可以清楚的看到程序的邏輯,init()用來(lái)進(jìn)行一些初始化的任務(wù),然后用generate()來(lái)生成需要的結(jié)構(gòu),最后用cutter()來(lái)完成動(dòng)畫(huà)和事件效果。
三、初始化程序
需要初始化的東西主要是一些參數(shù),然后找到需要進(jìn)行修改的圖片,最后進(jìn)行渲染。都是一些比較簡(jiǎn)單的操作。
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è)圖拼起來(lái),這樣動(dòng)畫(huà)效果就能達(dá)到了。
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();
};
這里的代碼也比較簡(jiǎn)單,首先得到外面層的寬度和高度,然后計(jì)算,再生成四個(gè)層,給四個(gè)層寫(xiě)入相應(yīng)的位置代碼,需要注意的是,外面層的position屬性要設(shè)置為relative,要么里面的層就無(wú)法準(zhǔn)確定位了。這里其實(shí)可以直接寫(xiě)入相應(yīng)的html代碼,但是為了表現(xiàn)清晰,我們采用了比較明朗的寫(xiě)法,先生成一個(gè)div,然后賦給他一些css屬性。
五、添加動(dòng)畫(huà)效果,注冊(cè)事件處理程序
完成了結(jié)構(gòu)的任務(wù),下一步就是給他添加動(dòng)畫(huà)效果了,我們只需要將這四個(gè)圖層在鼠標(biāo)經(jīng)過(guò)的時(shí)候移出外面的層,然鼠標(biāo)離開(kāi)的時(shí)候再?gòu)?fù)位就可以了,寫(xiě)起來(lái)也是非常的簡(jiǎn)單,看代碼:
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)畫(huà)還在進(jìn)行中的話,就終止動(dòng)畫(huà),這樣效果更加自然一些。that.easeIn和that.easeOut參數(shù)是用來(lái)設(shè)置動(dòng)畫(huà)的模式的,默認(rèn)的jQuery庫(kù)只有兩種簡(jiǎn)單的線性庫(kù),可以下載jQuery.easing庫(kù)來(lái)添加更多絢麗的效果。
這樣就完成了這個(gè)插件的編寫(xiě),完整的代碼如下:
(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);
很簡(jiǎn)單有趣的效果,邏輯很清楚,代碼也簡(jiǎn)單,是練手的好東東。
打包下載地址 http://www.dbjr.com.cn/jiaoben/26031.html
演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML文件中這樣寫(xiě):
復(fù)制代碼 代碼如下:
<div class="jcutter">
<img src="1.jpg" alt="">
<div class="jcutter-content">
這是點(diǎn)開(kāi)后的頁(yè)面的內(nèi)容
</div>
</div>
調(diào)用的話需要這樣寫(xiě):
復(fù)制代碼 代碼如下:
$(document).ready(function(){
options={
'speedIn':600, //圖片進(jìn)入時(shí)候的動(dòng)畫(huà)速度
'speedOut':400, //圖片退出時(shí)候的動(dòng)畫(huà)速度
'easeIn':'easeOutBounce', //圖片進(jìn)入時(shí)候的動(dòng)畫(huà)效果,這個(gè)效果需要easing庫(kù)
'easeOut':'' //圖片退出時(shí)候的動(dòng)畫(huà)效果
}
$('.jcutter').jCutter(options);
})
當(dāng)然要引用這個(gè)插件才行。下面我們來(lái)講解這個(gè)插件的編寫(xiě)。
一、jQuery插件編寫(xiě)的方法
寫(xiě)一個(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)就是如此。
首先要寫(xiě)成一個(gè)閉包的形式,不污染命名空間,然后根據(jù)jQuery提供的接口來(lái)編寫(xiě),這里的jCutter可以改成你自己插件的名字。$.extend是一個(gè)非常有趣的函數(shù),他會(huì)將第一個(gè)和第二個(gè)參數(shù)合并,對(duì)于兩個(gè)參數(shù)中都出現(xiàn)的值,用后者代替前者。
二、開(kāi)始編寫(xiě)
在這個(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è)類(lèi),這樣我們操作起來(lái)方便一些。通過(guò)上面的結(jié)構(gòu)我們可以清楚的看到程序的邏輯,init()用來(lái)進(jìn)行一些初始化的任務(wù),然后用generate()來(lái)生成需要的結(jié)構(gòu),最后用cutter()來(lái)完成動(dòng)畫(huà)和事件效果。
三、初始化程序
需要初始化的東西主要是一些參數(shù),然后找到需要進(jìn)行修改的圖片,最后進(jìn)行渲染。都是一些比較簡(jiǎ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è)圖拼起來(lái),這樣動(dòng)畫(huà)效果就能達(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();
};
這里的代碼也比較簡(jiǎn)單,首先得到外面層的寬度和高度,然后計(jì)算,再生成四個(gè)層,給四個(gè)層寫(xiě)入相應(yīng)的位置代碼,需要注意的是,外面層的position屬性要設(shè)置為relative,要么里面的層就無(wú)法準(zhǔn)確定位了。這里其實(shí)可以直接寫(xiě)入相應(yīng)的html代碼,但是為了表現(xiàn)清晰,我們采用了比較明朗的寫(xiě)法,先生成一個(gè)div,然后賦給他一些css屬性。
五、添加動(dòng)畫(huà)效果,注冊(cè)事件處理程序
完成了結(jié)構(gòu)的任務(wù),下一步就是給他添加動(dòng)畫(huà)效果了,我們只需要將這四個(gè)圖層在鼠標(biāo)經(jīng)過(guò)的時(shí)候移出外面的層,然鼠標(biāo)離開(kāi)的時(shí)候再?gòu)?fù)位就可以了,寫(xiě)起來(lái)也是非常的簡(jiǎn)單,看代碼:
復(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)畫(huà)還在進(jìn)行中的話,就終止動(dòng)畫(huà),這樣效果更加自然一些。that.easeIn和that.easeOut參數(shù)是用來(lái)設(shè)置動(dòng)畫(huà)的模式的,默認(rèn)的jQuery庫(kù)只有兩種簡(jiǎn)單的線性庫(kù),可以下載jQuery.easing庫(kù)來(lái)添加更多絢麗的效果。
這樣就完成了這個(gè)插件的編寫(xiě),完整的代碼如下:
復(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);
很簡(jiǎn)單有趣的效果,邏輯很清楚,代碼也簡(jiǎn)單,是練手的好東東。
打包下載地址 http://www.dbjr.com.cn/jiaoben/26031.html
您可能感興趣的文章:
- jQuery hover 延時(shí)器實(shí)現(xiàn)代碼
- JQuery入門(mén)——事件切換之hover()方法應(yīng)用介紹
- jQuery用unbind方法去掉hover事件及其他方法介紹
- Jquery的hover方法讓鼠標(biāo)經(jīng)過(guò)li時(shí)背景變色
- jQuery的live()方法對(duì)hover事件的處理示例
- jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例
- JQuery中使用on方法綁定hover事件實(shí)例
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)事件的延時(shí)處理效果
相關(guān)文章
jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁(yè)面上的一組checkbox全選/取消全選,邏輯很簡(jiǎn)單,實(shí)現(xiàn)代碼也沒(méi)有太難的語(yǔ)法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單,代碼也很簡(jiǎn)潔,精辟!2009-11-11jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼
上次做了一個(gè)前端項(xiàng)目,其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能,下面小編抽個(gè)時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考下2016-08-08Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開(kāi)發(fā)中,測(cè)試人員報(bào)告缺陷說(shuō),即時(shí)有表單驗(yàn)證,但是如果快速點(diǎn)擊兩下“提交”按鈕,系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。2010-03-0320個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案
本篇文章給大家分享了20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案,對(duì)此有需要的朋友可以參考下。2018-05-05jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)
在介紹如何擴(kuò)展jQuery之前,先大致看下jQuery源碼(以1.3.2版本為例)。2010-05-05