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 相关文章推荐
面向对象设计模式的核心法则
Nov 10 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
js轮播图之旋转木马效果
Oct 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Python爬虫工程师面试问题总结
2018/03/22 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
水果超市创业计划书
2014/01/27 职场文书
三年级语文教学反思
2014/02/01 职场文书
自主招生自荐信指南
2014/02/04 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
暑假家长评语大全
2014/04/17 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书