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 相关文章推荐
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 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动态生成虚拟现实VRML网页
2006/10/09 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python3如何将docx转换成pdf文件
2018/03/23 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
如何保障Web服务器安全
2014/05/05 面试题
会计专业自荐信范文
2013/12/02 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
护士实习鉴定范文
2013/12/22 职场文书
护理专业自荐信范文
2014/02/26 职场文书
司法所长先进事迹
2014/06/02 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
家长对孩子的寄语
2015/02/26 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
python lambda 表达式形式分析
2022/04/03 Python