软件开发培训班 >> 编程开发 >> JavaScript


jquery 图片 上一张 下一张 链接效果（续篇）

　　本文标签：jquery,上一张,下一张

前段时间写了篇图片 上一张 下一张 链接效果，后来看到 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事件