手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 图片 上一张 下一张 链接效果(续篇)
jquery 图片 上一张 下一张 链接效果(续篇)
摘要:前段时间写了篇图片上一张下一张链接效果,后来看到jquery插件封装,手里痒痒的,拿这个例子做ex.封装后的JS源码:复制代码代码如下:/*...

前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex.

封装后的JS源码:

复制代码 代码如下:

/*

* imageupdown 1.0

* Copyright (c) 2009

* Date: 2010-04-20

* 图片移动上一张 下一张特效

*/

(function($){

$.fn.imageupdown = function(options){

var defaults = {

upCursor:"pre.cur",

upTitle:"点击查看上一张",

upUrl:$(this).attr('left'),

downCursor:"next.cur",

downTitle:"点击查看下一张",

downUrl:$(this).attr('right')

}

var options = $.extend(defaults, options);

this.each(function(){

var thisImage=$(this);

$(thisImage).bind("mousemove",function(e){

var positionX=e.originalEvent.x||e.originalEvent.layerX||0;

if(positionX<=$(this).width()/2){

this.style.cursor='url('+options.upCursor+'),auto';

$(this).attr('title',''+options.upTitle+'');

$(this).parent().attr('href',''+options.upUrl+'');

}else{

this.style.cursor=''+options.downCursor+'';

$(this).attr('title',''+options.downTitle+'');

$(this).parent().attr('href',''+options.downUrl+'');

}

});

});

};

})(jQuery);

html页面调用方法:

复制代码 代码如下:

<script type="text/javascript">

$(document).ready(function() {

$(".rootclass").imageupdown();

});

</script>

可能有疑惑的地方:

(1)function(e) e 是什么意思

应该是对应事件。

$().click(function(e) {}); // 这里的e是click事件

$().focus(function(e) {});// 这里的e是focus事件

【jquery 图片 上一张 下一张 链接效果(续篇)】相关文章:

jQuery处理图片加载失败的常用方法

javascript转换静态图片,增加粒子动画效果

jQuery预加载图片常用方法

jquery简单实现外部链接用新窗口打开的方法

jquery实现弹出层效果实例

jQuery实现转动随机数抽奖效果的方法

jQuery实现表格行上下移动和置顶效果

jQuery插件Slider Revolution实现响应动画滑动图片切换效果

jQuery构造函数init参数分析续

jQuery实现表格行上移下移和置顶的方法

精品推荐
分类导航