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


Posted in Javascript onApril 20, 2010

前段时间写了篇图片 上一张 下一张 链接效果,后来看到 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事件
Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
javascript修改图片src的方法
Jan 27 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
制作高质量的JQuery Plugin 插件的方法
Apr 20 #Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 #Javascript
jquery+json 通用三级联动下拉列表
Apr 19 #Javascript
javascript中的变量是传值还是传址的?
Apr 19 #Javascript
js获取当前select 元素值的代码
Apr 19 #Javascript
监控 url fragment变化的js代码
Apr 19 #Javascript
jquery获取input表单值的代码
Apr 19 #Javascript
You might like
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP 实现重载
2021/03/09 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
javascript 函数调用规则
2009/08/26 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python面试题之列表声明实例分析
2019/07/08 Python
python多任务之协程的使用详解
2019/08/26 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
什么是serialVersionUID
2016/03/04 面试题
物业管理毕业生的自我评价
2014/02/17 职场文书
保护水资源的标语
2014/06/17 职场文书
专家推荐信范文
2015/03/26 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js