现在的位置: 首页 > 综合 > 正文

基于jquery的一个图片hover的插件

2013年01月22日 ⁄ 综合 ⁄ 共 5367字 ⁄ 字号 评论关闭

先来看看使用方法。
演示地址 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

抱歉!评论已关闭.