基于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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
浅说js变量
May 25 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
微信小程序canvas实现签名功能
Jan 19 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
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
ant design实现圈选功能
2019/12/17 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
bat和python批量重命名文件的实现代码
2016/05/19 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
病假证明模板
2015/06/19 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP
千万级用户系统SQL调优实战分享
2022/03/03 MySQL