先來看看使用方法。
演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML文件中這樣寫：
代碼如下:
<div class="jcutter">
<img src="1.jpg" alt="">
<div class="jcutter-content">
這是點開後的頁面的內容
</div>
</div>
調用的話需要這樣寫：
代碼如下:
$(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插件的結構就是如此。
首先要寫成一個閉包的形式，不污染命名空間，然後根據jQuery提供的接口來編寫，這裡的jCutter可以改成你自己插件的名字。$.extend是一個非常有趣的函數，他會將第一個和第二個參數合並，對於兩個參數中都出現的值，用後者代替前者。
二、開始編寫
在這個例子中，因為要用到選擇器，所以我們做一些修改，結構改成如下的樣子。
代碼如下:
(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()來完成動畫和事件效果。
三、初始化程序
需要初始化的東西主要是一些參數，然後找到需要進行修改的圖片，最後進行渲染。都是一些比較簡單的操作。
代碼如下:
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代碼，但是為了表現清晰，我們采用了比較明朗的寫法，先生成一個div，然後賦給他一些css屬性。
五、添加動畫效果，注冊事件處理程序
完成了結構的任務，下一步就是給他添加動畫效果了，我們只需要將這四個圖層在鼠標經過的時候移出外面的層，然鼠標離開的時候再復位就可以了，寫起來也是非常的簡單，看代碼：
代碼如下:
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()函數的作用就是如果在事件再次出發的時候，上一次的動畫還在進行中的話，就終止動畫，這樣效果更加自然一些。that.easeIn和that.easeOut參數是用來設置動畫的模式的，默認的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.jb51.net/jiaoben/26031.html