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 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
canvas红包照片实例分享
Feb 28 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
Vue学习笔记之计算属性与侦听器用法
Dec 07 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
discuz7 phpMysql操作类
2009/06/21 PHP
php之XML转数组函数的详解
2013/06/07 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python 导入数据及作图的实现
2019/12/03 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
初中化学教学反思
2014/01/23 职场文书
干部考核评语
2014/04/29 职场文书
公开承诺书格式
2014/05/21 职场文书
村容村貌整治方案
2014/05/21 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS