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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
JavaScript canvas实现文字时钟
Jan 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/19 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
基于python实现操作git过程代码解析
2020/07/27 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
电影红河谷观后感
2015/06/11 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python