基于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 的Document属性和方法集合
Jan 25 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
jquery常用的12个小功能
Jul 22 Javascript
JS中常用的消息框总结
Feb 24 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
十天学会php之第六天
2006/10/09 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
医学生求职自荐信
2013/10/25 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
甜品店创业计划书
2014/09/21 职场文书
食品药品安全责任书
2015/05/11 职场文书
让世界充满爱观后感
2015/06/10 职场文书
会议室管理制度范本
2015/08/06 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android