脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 图片hover

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

 更新时间：2010年04月24日 13:34:57   作者：  
很简单有趣的效果，逻辑很清楚，代码也简单，是练手的好东东。
先来看看使用方法。
演示地址 http://demo.jb51.net/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://www.jb51.net/jiaoben/26031.html
您可能感兴趣的文章:

相关文章

  • 初试jQuery EasyUI 使用介绍

    初试jQuery EasyUI 使用介绍

    想必关注jQuery的同学们对jQuery EasyUI已经有所耳闻了，目前已经更新到1.0.5版本，风格与EXTJS有点相似，可以很好的满足开发人员对UI的需求。
    2010-04-04
  • jQuery中ajax的get()方法用法实例

    jQuery中ajax的get()方法用法实例

    这篇文章主要介绍了jQuery中ajax的get()方法用法,以实例形式较为详细的分析了get()方法的功能、定义及具体使用技巧,需要的朋友可以参考下
    2014-12-12
  • jQuery输入城市查看地图使用介绍

    jQuery输入城市查看地图使用介绍

    任意输入国家和城市，用“，”分隔，点击设置下面的超链接就变为了刚设置的城市，点击可以跳到这个城市的查看地图页，鼠标移到超链接上会弹出一个350*350的地图
    2013-05-05
  • jQuery checkbox全选/取消全选实现代码

    jQuery checkbox全选/取消全选实现代码

    用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！
    2009-11-11
  • jquery中ajax学习笔记3

    jquery中ajax学习笔记3

    由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
    2011-10-10
  • jQuery解析Json实例详解

    jQuery解析Json实例详解

    这篇文章主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • jQuery 全选 全部选 反选 实现代码

    jQuery 全选 全部选 反选 实现代码

    上次做了一个前端项目，其中有功能要求实现jquery 全选和反选功能，下面小编抽个时间把实现代码分享到脚本之家平台供大家参考下
    2016-08-08
  • Jquery Validation插件防止重复提交表单的解决方法

    Jquery Validation插件防止重复提交表单的解决方法

    在项目开发中，测试人员报告缺陷说，即时有表单验证，但是如果快速点击两下“提交”按钮，系统会产生两条相同的记录。
    2010-03-03
  • 20个最常见的jQuery面试问题及答案

    20个最常见的jQuery面试问题及答案

    本篇文章给大家分享了20个最常见的jQuery面试问题及答案，对此有需要的朋友可以参考下。
    2018-05-05
  • jQuery 学习第七课 扩展jQuery的功能 插件开发

    jQuery 学习第七课 扩展jQuery的功能 插件开发

    在介绍如何扩展jQuery之前，先大致看下jQuery源码（以1.3.2版本为例）。
    2010-05-05

最新评论