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_05_原型继承原理
Oct 13 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
js实现弹幕墙效果
Dec 10 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
php压缩和解压缩字符串的方法
2015/03/14 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
药学专业大学生自荐信
2013/09/28 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
社区两委对照检查材料
2014/08/23 职场文书
期末复习计划
2015/01/19 职场文书
先进教师个人总结
2015/02/11 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers