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 import css实例代码
Jul 18 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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之第六天
2006/10/09 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python中的代码编码格式转换问题
2015/06/10 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
用python实现名片管理系统
2020/06/18 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
联想C++笔试题
2012/06/13 面试题
农村党支部先进事迹
2014/01/14 职场文书
政工例会汇报材料
2014/08/26 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL