基于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实现给图片加链接
Aug 15 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
koa-passport实现本地验证的方法示例
Feb 20 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
Vue实现简单购物车功能
2020/12/13 Vue.js
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python入门篇之面向对象
2014/10/20 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Python中的self用法详解
2019/08/06 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python属于软件吗
2020/06/18 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
抽象方法、抽象类怎样声明
2014/10/25 面试题
机关财务管理制度
2014/01/17 职场文书
教师档案管理制度
2014/01/23 职场文书
理发店策划方案
2014/06/05 职场文书
年终工作总结范文2014
2014/11/27 职场文书
警示教育片观后感
2015/06/17 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python