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

先来看看使用方法。
演示地址 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);

很简单有趣的效果，逻辑很清楚，代码也简单，是练手的好东东。
打包下载地址 http://www.jb51.net/jiaoben/26031.html

时间： 2024-09-25 06:44:45

基于jquery的一个图片hover的插件_jquery的相关文章

基于JQuery的6个Tab选项卡插件_jquery

顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

jQuery 一个图片切换的插件_jquery

以下是参数说明:  参数名称  描述  delay  图片切换速度,单位毫秒  maskOpacity  遮罩层透明度,1为不透明,0为全透明  numOpacity  数字按钮透明度,1为不透明,0为全透明  maskBgColor  遮罩层背景色  textColor  标题字体颜色  numColor  数字按钮字体颜色  numBgColor  数字按钮背景色  alterColor  数字按钮选中项字体颜色  alterBgColor  数字按钮选中项背景颜色 插件代码及调用 - 插件

基于jquery的动态创建表格的插件_jquery

废话少说直接进入主题, 表格功能: 1.添加 2.删除 3.获取值 4.动态填充数据 5.动态设置焦点 6.键盘左右上下键控制单元格焦点 7.单元格添加正则验证功能 WebForm4.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %&

multiSteps 基于Jquery的多步骤滑动切换插件_jquery

插图:在支持Html5浏览器下观看会有更加体验 其中IE9以下版本使用滤镜模拟了一个阴影,删掉此处内容,IE下运行会更加平滑(至少我的老爷机运行更平滑了.) 第一步插图: 启动函数需要返回值,在这个启动函数里面你可以为所欲为,但是在你坏事做完之后必须返回一个值, 被发现,那你就得停下来等待处理结果,那么就返回false,无法继续执行, 没有被发现那就赶紧的离开这里,返回true,继续执行到下一步! 第二步插图:跳出的提示是第一步执行完毕之后的回调函数 回调函数没有返回值,事实上,执行回调函数的时

基于jquery的多功能软键盘插件_jquery

支持查询功能的键盘和简单得软键盘,键盘样式完全在独立的css文件中定义,可以自行美化. (支持从查询的软键盘) (简单的软件盘) 插件的默认参数 复制代码 代码如下: jquery.fn.softkeyboard.defaults = { names: { _delbtn: "skbdel", _clearbtn: "skbclear", _querybtn: "skbquery", _closebtn: "skbclose"

基于jQuery的投票系统显示结果插件_jquery

首先还是来看一下运行效果如图1所示. 该插件使用步骤 一.引入css文件 首先页面引入css样式文件'votecss.css',他是投票结果正常显示必不可少的.具体代码如下所示: <link href="startpic/votecss.css" rel="stylesheet" type="text/css" /> 二.引入jQuery的就是源文件 该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下: <

基于jQuery的360图片展示实现代码_jquery

复制代码 代码如下: $(function(){ var box_W = $(".PIC360").width(); var box_H = $(".PIC360").height(); var box_X = $(".PIC360").offset().left; var box_Y = $(".PIC360").offset().top; //求出中心点的横坐标值 var center_X = Math.ceil(box_

基于jquery的direction图片渐变动画效果_jquery

还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv

基于jquery的无缝循环新闻列表插件_jquery

一.效果图:tips源码下载 http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar二.jquery源码: 复制代码 代码如下: (function($){ $.fn.extend({ newsList:function(options){ var defaults ={ actName:'li', //显示条数名: maxShowNum:'6', //最多的显示条数: actNameH:'28', //一次移动的距离: ulClass:'