html图片依次下一张,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页面调用方法:

$(document).ready(function() {

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

});

可能有疑惑的地方:

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

应该是对应事件。

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值