欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于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ě):
復(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

相關(guān)文章

  • 初試jQuery EasyUI 使用介紹

    初試jQuery EasyUI 使用介紹

    想必關(guān)注jQuery的同學(xué)們對(duì)jQuery EasyUI已經(jīng)有所耳聞了,目前已經(jīng)更新到1.0.5版本,風(fēng)格與EXTJS有點(diǎn)相似,可以很好的滿(mǎn)足開(kāi)發(fā)人員對(duì)UI的需求。
    2010-04-04
  • jQuery中ajax的get()方法用法實(shí)例

    jQuery中ajax的get()方法用法實(shí)例

    這篇文章主要介紹了jQuery中ajax的get()方法用法,以實(shí)例形式較為詳細(xì)的分析了get()方法的功能、定義及具體使用技巧,需要的朋友可以參考下
    2014-12-12
  • jQuery輸入城市查看地圖使用介紹

    jQuery輸入城市查看地圖使用介紹

    任意輸入國(guó)家和城市,用“,”分隔,點(diǎn)擊設(shè)置下面的超鏈接就變?yōu)榱藙傇O(shè)置的城市,點(diǎn)擊可以跳到這個(gè)城市的查看地圖頁(yè),鼠標(biāo)移到超鏈接上會(huì)彈出一個(gè)350*350的地圖
    2013-05-05
  • jQuery checkbox全選/取消全選實(shí)現(xià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-11
  • jquery中ajax學(xué)習(xí)筆記3

    jquery中ajax學(xué)習(xí)筆記3

    由于很多知識(shí)都已經(jīng)做了詳細(xì)介紹,本節(jié)只介紹需要修改的代碼,使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù),web.xml、后臺(tái)的servet都不用改
    2011-10-10
  • jQuery解析Json實(shí)例詳解

    jQuery解析Json實(shí)例詳解

    這篇文章主要介紹了jQuery解析Json的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery針對(duì)json的常用解析與轉(zhuǎn)換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11
  • jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼

    jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼

    上次做了一個(gè)前端項(xiàng)目,其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能,下面小編抽個(gè)時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考下
    2016-08-08
  • Jquery Validation插件防止重復(fù)提交表單的解決方法

    Jquery Validation插件防止重復(fù)提交表單的解決方法

    在項(xiàng)目開(kāi)發(fā)中,測(cè)試人員報(bào)告缺陷說(shuō),即時(shí)有表單驗(yàn)證,但是如果快速點(diǎn)擊兩下“提交”按鈕,系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。
    2010-03-03
  • 20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案

    20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案

    本篇文章給大家分享了20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案,對(duì)此有需要的朋友可以參考下。
    2018-05-05
  • jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)

    jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)

    在介紹如何擴(kuò)展jQuery之前,先大致看下jQuery源碼(以1.3.2版本為例)。
    2010-05-05

最新評(píng)論