基于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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
js 替换
Feb 19 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
jQuery异步提交表单实例
May 30 jQuery
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
Python的函数的一些高阶特性
2015/04/27 Python
python删除列表内容
2015/08/04 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
django解决订单并发问题【推荐】
2019/07/31 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
离婚协议书范本样本
2014/08/19 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
在校证明模板
2015/06/17 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
调解协议书范本
2016/03/21 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
python处理json数据文件
2022/04/11 Python