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 相关文章推荐
js使用循环清空某个div中的input标签值
Sep 29 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
es5 类与es6中class的区别小结
Nov 09 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
javascript 动态添加表格行
2006/06/22 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python中的字符串内部换行方法
2018/07/19 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python3正则模块re的使用方法详解
2020/02/11 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
丽江古城导游词
2015/02/03 职场文书
金榜题名主持词
2015/07/02 职场文书
同学聚会祝酒词
2015/08/10 职场文书
Python+Appium新手教程
2021/04/17 Python