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


Posted in Javascript onApril 24, 2010

先来看看使用方法。
演示地址 http://demo.3water.com/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);

很简单有趣的效果,逻辑很清楚,代码也简单,是练手的好东东。
打包下载地址 https://3water.com/jiaoben/26031.html
Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
预加载css或javascript的js代码
Apr 23 #Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 #Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 #Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 #Javascript
js 文件引入实现代码
Apr 23 #Javascript
网页图片延时加载的js代码
Apr 22 #Javascript
基于jQuery的表格操作插件
Apr 22 #Javascript
You might like
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python实现的堆排序算法示例
2018/04/29 Python
python人民币小写转大写辅助工具
2018/06/20 Python
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
感恩的演讲稿
2014/05/06 职场文书
安全标语大全
2014/06/10 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
介绍信样本
2015/01/31 职场文书
工地食品安全责任书
2015/05/09 职场文书