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 相关文章推荐
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php长字符串定义方法
2012/07/12 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python输出带颜色的字符串实例
2017/10/10 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Python发展简史 Python来历
2019/05/14 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
会计求职自荐信
2014/06/20 职场文书
垃圾桶标语
2014/06/24 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
银行求职信范文
2019/05/13 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
德生BCL3000抢先使用感受和评价
2022/04/07 无线电