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 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
img标签中onerror用法
2009/08/13 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
使用python存储网页上的图片实例
2018/05/22 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
小学生自我评价范例
2013/09/24 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
安全环保演讲稿
2014/08/28 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
mysql脏页是什么
2021/07/26 MySQL