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动态判断html元素并执行不同的操作
Jun 16 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python类继承用法实例分析
2015/05/27 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python 装饰器的基本使用
2021/01/13 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
销售人员个人求职信
2013/09/26 职场文书
信息管理员岗位职责
2013/12/01 职场文书
创先争优制度
2014/01/21 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL