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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
react国际化react-intl的使用
May 06 Javascript
制作高质量的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
模拟xcopy的函数
2006/10/09 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php连接mysql数据库
2017/03/21 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
大专生的学习自我评价
2013/12/04 职场文书
校园之星获奖感言
2014/01/29 职场文书
十佳护士获奖感言
2014/02/18 职场文书
法律进机关实施方案
2014/03/12 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
政治表现评语
2014/05/04 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书