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

基于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.dbjr.com.cn/jiaoben/26031.html

相關文章

  • 初試jQuery EasyUI 使用介紹

    初試jQuery EasyUI 使用介紹

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

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

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

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

    任意輸入國家和城市，用“，”分隔，點擊設置下面的超鏈接就變?yōu)榱藙傇O置的城市，點擊可以跳到這個城市的查看地圖頁，鼠標移到超鏈接上會彈出一個350*350的地圖
    2013-05-05
  • jQuery checkbox全選/取消全選實現(xiàn)代碼

    jQuery checkbox全選/取消全選實現(xiàn)代碼

    用JavaScript使頁面上的一組checkbox全選/取消全選，邏輯很簡單，實現(xiàn)代碼也沒有太難的語法。但使用jQuery實現(xiàn)則更簡單，代碼也很簡潔，精辟！
    2009-11-11
  • jquery中ajax學習筆記3

    jquery中ajax學習筆記3

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

    jQuery解析Json實例詳解

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

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

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

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

    在項目開發(fā)中，測試人員報告缺陷說，即時有表單驗證，但是如果快速點擊兩下“提交”按鈕，系統(tǒng)會產(chǎn)生兩條相同的記錄。
    2010-03-03
  • 20個最常見的jQuery面試問題及答案

    20個最常見的jQuery面試問題及答案

    本篇文章給大家分享了20個最常見的jQuery面試問題及答案，對此有需要的朋友可以參考下。
    2018-05-05
  • jQuery 學習第七課 擴展jQuery的功能 插件開發(fā)

    jQuery 學習第七課 擴展jQuery的功能 插件開發(fā)

    在介紹如何擴展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。
    2010-05-05

最新評論