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的动画类 Fx.js
Nov 05 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
如何使用CocosCreator对象池
Apr 14 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
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python中正则表达式详解
2017/05/17 Python
python自定义异常实例详解
2017/07/11 Python
python中reader的next用法
2018/07/24 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
python import 上级目录的导入
2020/11/03 Python
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
个人求职信范文分享
2013/12/13 职场文书
八一慰问活动方案
2014/02/07 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
干部培训简讯
2015/07/20 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python