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 29 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
七个很有意思的PHP函数
May 12 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
Jquery Fade用法详解
Nov 06 jQuery
制作高质量的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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
python搜索指定目录的方法
2015/04/29 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
办公室文员自荐书
2014/02/03 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
上班迟到检讨书
2014/09/15 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书