首页 web前端 js教程 基于jquery实现一张图片点击鼠标放大再点缩小_jquery

基于jquery实现一张图片点击鼠标放大再点缩小_jquery

May 16, 2016 pm 05:21 PM
图片放大 鼠标点击

复制代码 代码如下:







<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>









本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PPT鼠标点击文字出现下划线动画制作方法 PPT鼠标点击文字出现下划线动画制作方法 Mar 26, 2024 pm 06:40 PM

PPT鼠标点击文字出现下划线动画制作方法

纯CSS实现鼠标点击水波纹效果的实现步骤 纯CSS实现鼠标点击水波纹效果的实现步骤 Oct 16, 2023 am 08:57 AM

纯CSS实现鼠标点击水波纹效果的实现步骤

JavaScript 如何实现图片鼠标悬停放大效果? JavaScript 如何实现图片鼠标悬停放大效果? Oct 20, 2023 am 09:16 AM

JavaScript 如何实现图片鼠标悬停放大效果?

如何利用Vue实现图片的滚动和放大动画? 如何利用Vue实现图片的滚动和放大动画? Aug 18, 2023 am 08:13 AM

如何利用Vue实现图片的滚动和放大动画?

如何利用Layui实现图片放大缩小的幻灯片效果 如何利用Layui实现图片放大缩小的幻灯片效果 Oct 27, 2023 am 10:51 AM

如何利用Layui实现图片放大缩小的幻灯片效果

鼠标能移动但点击无效怎么解决 鼠标能移动但点击无效怎么解决 Oct 11, 2023 pm 02:20 PM

鼠标能移动但点击无效怎么解决

Vue如何解决移动端手势放大图片闪烁问题 Vue如何解决移动端手势放大图片闪烁问题 Jun 30, 2023 pm 11:21 PM

Vue如何解决移动端手势放大图片闪烁问题

如何利用Layui实现图片放大和翻转效果 如何利用Layui实现图片放大和翻转效果 Oct 24, 2023 am 11:16 AM

如何利用Layui实现图片放大和翻转效果

See all articles