jCutter,一个图片hover的jQuery插件

效果演示看这里

先来看看使用方法。

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

 

很简单有趣的效果,逻辑很清楚,代码也简单,是练手的好东东。

posted @ 2010-04-20 21:00 BeiYuu 阅读(...) 评论(...) 编辑 收藏