微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

jquery 图片 上一张 下一张 链接效果（续篇）_jquery

php中文网
发布： 2016-05-16 18:28:59
原创
1340人浏览过

前段时间写了篇图片 上一张 下一张 链接效果，后来看到 jquery插件封装，手里痒痒的，拿这个例子做ex.

封装后的JS源码：

腾讯Effidit
腾讯Effidit

腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验

腾讯Effidit 65
查看详情 腾讯Effidit
复制代码 代码如下:

/*
* 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(positionXthis.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页面调用方法：
复制代码 代码如下:



可能有疑惑的地方：
（1）function(e) e 是什么意思
应该是对应事件。
$().click(function(e) {}); // 这里的e是click事件
$().focus(function(e) {});// 这里的e是focus事件
相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：基于jquery1.4.2的仿flash超炫焦点图播放效果_jquery 下一篇：js 文件引入实现代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript协程实现原理_javascript并发编程 JavaScript通过生成器与Promise结合模拟协程，实现协作式并发。1.Generator函数用yield暂停执行，next()恢复，形成“暂停-恢复”机制；2.结合Promise可处理异步操作，自动执行器递归调用next()并等待Promise完成；3.async/await是协程的语法糖，await暂停函数直至Promise解决；4.可实现并发控制，如任务队列、资源池等；5.所有机制基于单线程事件循环，依赖任务让出执行权，非抢占式多线程。
2025-12-02 10:39:17
445
JavaScript图算法实现_javascript复杂计算 图算法在JavaScript中通过邻接表或矩阵表示，适用于社交网络、导航等场景，结合DFS、BFS、Dijkstra等算法可高效处理路径与关系问题。
2025-12-02 10:39:06
297
优化条件执行：在无else分支场景下使用逻辑与(&&)运算符 本文探讨在编程中，当需要根据一个布尔条件执行某个操作，而不需要显式else分支时，如何优雅地实现条件执行。我们将介绍并推荐使用逻辑与(&&)运算符进行短路求值，作为传统三元运算符CONDITION?ACTION():false;的简洁高效替代方案，提升代码可读性和表达力。
2025-12-02 10:35:18
624
Web Storage使用指南_localStorage与sessionStorage的区别 localStorage持久存储且同源共享，适合用户偏好；sessionStorage仅限当前会话，适合临时数据；两者均遵循同源策略，API相同但作用域与生命周期不同。
2025-12-02 10:29:02
169
箭头函数与普通函数区别详解_this绑定行为的深度解析 箭头函数的this在定义时绑定，继承外层作用域；普通函数的this在调用时动态确定。1.普通函数：this取决于调用方式，可被call/apply/bind修改，适用于对象方法和构造函数。2.箭头函数：无自身this，不能用作构造函数或改变this，适合回调中保持上下文。3.应用建议：需保持外层this时用箭头函数，需动态绑定或定义方法时用普通函数。
2025-12-02 10:20:39
205
JavaScript数组对象转换与分组教程 本教程将详细介绍如何将包含嵌套对象的JavaScript数组，根据其中某个属性（如“category”）进行分组，并将其转换为一个以该属性值为键、以相关“level”值组成的数组为值的对象。文章将提供两种主流实现方法：基于for...of循环的迭代方式和利用reduce高阶函数的函数式编程方式，并分析它们的特点与适用场景。
2025-12-02 10:08:02
197
JavaScript迭代方案_javascript循环优化 传统for循环性能最高，适合需中断或大数据量场景；for...of语法简洁，适用于可迭代对象；避免用for...in遍历数组；高阶函数map/forEach可读性好但有性能开销；优化建议包括缓存长度、减少DOM操作和避免重复计算。
2025-12-02 10:05:51
551
javascript_数据结构在JS中的应用 合理选择数据结构可显著提升代码性能与可维护性。1.数组适合有序集合，push/pop实现栈操作效率高，避免频繁shift/unshift；2.Map优于对象用于动态键或非字符串键，支持任意类型键且性能更稳；3.Set自动去重，适用于数组去重和访问记录；4.自定义结构如链表、栈、队列在特定场景（如LRU缓存、BFS）中能提升效率；选对结构往往比优化算法更关键。
2025-12-02 09:19:02
274
纯JavaScript判断Input元素是否位于指定类容器内 本文详细介绍了如何使用纯JavaScript的querySelector方法来判断一个input元素是否嵌套在特定的CSS类容器中。通过组合CSS选择器，可以直接检查目标input元素是否存在于指定容器内，并区分出其存在但不在容器内，或完全不存在的三种情况，提供清晰的代码示例和实现逻辑。
2025-12-02 09:17:22
374
拖放API使用详解_实现可排序列表的完整方案 首先通过HTML5拖放API实现可排序列表，需掌握dragstart、dragover、drop和dragend四个核心事件；接着在HTML中构建带draggable属性的列表项，并绑定唯一data-id；然后在JavaScript中，于dragstart设置拖动数据并添加视觉反馈类，dragover阻止默认行为以允许放置，drop时获取源和目标元素，根据索引交换位置完成排序，最后在dragend移除样式类。
2025-12-02 08:55:40
743
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部