jquery 图片 上一张 下一张 链接效果(续篇)
2010-04-20 00:00
615 查看
前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex.
封装后的JS源码:
html页面调用方法:
可能有疑惑的地方:
(1)function(e) e 是什么意思
应该是对应事件。
$().click(function(e) {}); // 这里的e是click事件
$().focus(function(e) {});// 这里的e是focus事件
封装后的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 实现滚动向上滚动图片上一张停顿一下在上一张效果
- 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)
- 图片 上一张 下一张 链接效果
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
- 一张图片 点击鼠标放大,再点缩小 ( 基于jquery1.8.3), 另外推荐一款插件:lightBox...效果不错。
- javascript 图片上一张下一张链接效果代码
- 如何在一张图片上添加多个链接 ,如何利用js做出靠右侧浮动菜单栏的效果
- 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)
- 10个相当给力的jQuery横向图片滚动效果
- jquery实现图片滚动效果的简单实例
- jQuery+HTML5实现图片上传前预览效果
- jquery轮换图片效果学习
- jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
- jQuery实现点击图片翻页展示效果的方法
- jquery实现图片轮番效果(二)
- 基于jquery实现图片广告轮换效果代码