微信公众号 讲师中心
首页
文章
后端开发 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 17:21:09
原创
1615人浏览过
复制代码 代码如下:







<script> <BR>var isopen = false; <BR>var newImg; <BR>var w = 200; //将图片宽度+200 <BR>var h = 200; // 将图片高度 +200 <BR>$(document).ready(function(){ <BR>$("img").bind("click", function(){ <BR>newImg = this; <BR>if (!isopen) <BR>{ <BR>isopen = true; <BR>$(this).width($(this).width() + w); <BR>$(this).height($(this).height() + h); <BR>moveImg(10, 10); <BR>} <BR>else <BR>{ <BR>isopen = false; <BR>$(this).width($(this).width() - w); <BR>$(this).height($(this).height() - h); <BR>moveImg(-10, -10); <BR>} <br><br>}); <BR>}); <BR>//移位 <BR>i = 0; <BR>function moveImg(left,top) <BR>{ <BR>var offset = $(newImg).offset(); <BR>$(newImg).offset({ top: offset.top + top, left: offset.left + left}); <BR>if (i == 10) <BR>{ <BR>i =0; <BR>return; <BR>} <BR>setTimeout("moveImg("+left+","+top+")", 10); <BR>i++; <BR>} <BR></script>









大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：jquery ajax 调用失败的原因示例介绍_jquery 下一篇：js将当前时间格式转换成时间搓(自写)_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript数据结构_图算法实现 图由顶点和边组成，可用邻接表或矩阵表示；JavaScript中常用邻接表实现无向图。1.广度优先搜索（BFS）使用队列逐层遍历，适合查找未加权图的最短路径。2.深度优先搜索（DFS）通过递归或栈深入遍历，适用于连通分量与拓扑排序。3.Dijkstra算法利用优先队列计算带权图的单源最短路径，维护距离表并持续更新邻居节点的最短距离。
2025-11-23 21:34:57
232
JavaScript性能优化_代码分割 代码分割通过将大JS文件拆分为小块并按需加载，减少首屏加载时间。它利用构建工具如Webpack或Vite，结合路由实现懒加载，例如React的React.lazy与Suspense、Vue的动态导入。基于路由时，每个页面组件独立打包，访问时才加载；按功能可分离重型模块如地图或编辑器；第三方库可用splitChunks提取公共依赖。还可通过preload预加载关键资源，prefetch在空闲时预取后续模块，提升性能。关键是区分优先级，合理配置以优化加载时机。
2025-11-23 21:34:02
903
解决Node.js应用在Railway平台连接MySQL数据库的常见问题 本教程旨在解决Node.js应用在Railway平台部署时，连接MySQL数据库可能遇到的ETIMEDOUT和ENOTFOUND错误。文章将详细指导如何通过引入mysql2/promise连接池、利用环境变量安全管理数据库凭证，并采用async/await语法优化数据库操作，从而建立稳定可靠的数据库连接。
2025-11-23 21:33:23
490
现代JavaScript_数字分隔符 数字分隔符用下划线提升大数可读性，如1_000_000；支持十进制、二进制、八进制、十六进制和科学计数法；不能在首尾、连续使用或紧邻小数点及e符号。
2025-11-23 21:30:58
192
JavaScript移动开发_ReactNative混合应用架构 ReactNative通过JSX转原生组件实现跨平台开发，采用JavaScript线程、原生UI线程与通信桥三线程架构，支持分层设计与原生交互，结合Expo、FastRefresh等工具提升开发效率，适合多平台快速迭代团队。
2025-11-23 21:28:02
138
JavaScript组件化_WebComponents标准实践 WebComponents通过CustomElements、ShadowDOM和HTMLTemplates实现原生组件化。CustomElements允许创建带行为的自定义标签，需继承HTMLElement并用customElements.define注册，标签名必须含短横线。ShadowDOM通过attachShadow提供隔离的DOM和样式，mode为‘open’可访问shadowRoot，‘closed’则不可，内部使用分发内容。HTMLTemplates定义不渲染的模板结构，可在JS中克
2025-11-23 21:20:02
195
深入JavaScript_执行上下文与作用域链 执行上下文分为全局、函数和eval三种，创建阶段确定this、词法环境和变量环境，作用域链由词法环境构成，逐层查找变量，闭包利用作用域链访问外部变量，let/const引入块级作用域和暂时性死区，共同决定变量访问与生命周期。
2025-11-23 21:20:02
750
JavaScript设计模式_状态模式 状态模式通过封装不同状态下的行为使对象在状态改变时改变其行为。以电灯为例，关态（OffState）按下开关变为开态（OnState），反之亦然；上下文（Light）持有当前状态并委托调用pressSwitch方法实现状态切换。核心角色包括Context（如Light类）、State接口及ConcreteState（如OnState、OffState）。优势在于消除冗长条件判断，提升可维护性，适用于订单状态、游戏角色动作等有限状态机场景。
2025-11-23 21:19:36
664
JavaScript性能调优_防抖与节流 防抖指事件频繁触发时仅执行最后一次，适用于搜索联想等场景；节流则保证在固定时间间隔内最多执行一次，适合滚动监听等连续操作，两者均通过降低函数执行频率提升性能。
2025-11-23 21:13:04
813
JavaScript网络安全_XSS与CSRF防护策略 XSS通过注入恶意脚本窃取数据，需过滤输入、编码输出、使用CSP及HttpOnlyCookie；CSRF伪造用户请求，需验证Origin、使用Anti-CSRFToken、设置SameSiteCookie并增加二次验证。
2025-11-23 21:10:02
515
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部