源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery 图片 上一张 下一张 链接效果(续篇)

  • 时间:2022-05-29 18:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery 图片 上一张 下一张 链接效果(续篇)
前段时间写了篇[url=http://www.1sucai.cn/article/22503.htm]图片 上一张 下一张 链接[/url]效果,后来看到 [url=http://www.1sucai.cn/article/22849.htm]jquery插件[/url]封装,手里痒痒的,拿这个例子做ex. 封装后的JS源码:
[u]复制代码[/u] 代码如下:
/* * 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页面调用方法:
[u]复制代码[/u] 代码如下:
<script type="text/javascript"> $(document).ready(function() { $(".rootclass").imageupdown(); }); </script>
可能有疑惑的地方: (1)function(e) e 是什么意思 应该是对应事件。 $().click(function(e) {}); // 这里的e是click事件 $().focus(function(e) {});// 这里的e是focus事件
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部