html中点击照片时放大缩小,基于jquery实现一张图片点击鼠标放大再点缩小

. 代码如下:

var isopen = false;

var newImg;

var w = 200; //将图片宽度+200

var h = 200; // 将图片高度 +200

$(document).ready(function(){

$("img").bind("click", function(){

newImg = this;

if (!isopen)

{

isopen = true;

$(this).width($(this).width() + w);

$(this).height($(this).height() + h);

moveImg(10, 10);

}

else

{

isopen = false;

$(this).width($(this).width() - w);

$(this).height($(this).height() - h);

moveImg(-10, -10);

}

});

//移位

i = 0;

function moveImg(left,top)

{

var offset = $(newImg).offset();

$(newImg).offset({ top: offset.top + top, left: offset.left + left});

if (i == 10)

{

i =0;

return;

}

setTimeout("moveImg("+left+","+top+")", 10);

i++;

}

html中点击照片时放大缩小,基于jquery实现一张图片点击鼠标放大再点缩小相关推荐

一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览源码下载实现的代码. html代码: <a ...
macOS系统中修改用户头像点击照片时显示未找到照片，且图库中有照片的解决办法
最近,在mac中操作照片App的时候,不小心把图库删除了,之后重新创建图库后,修改用户头像的时候,发现照片选项中显示未找到,解决办法如下: 1. 打开照片App,从菜单栏中选取"照片&quo ...
基于jQuery实现自动或点击切换效果
效果图功能:元素自动切换,当点击下方小圆点时,控制上方元素同步切换方法:主要是定义一个全局变量,通过自增变化来控制自动切换效果,其中当自身显示时,兄弟元素隐藏:给小圆点添加单击事件,当点击时,传递 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
《基于JQuery和CSS的特效整理》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅 https://www.web ...
Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
点击关闭按钮时缩小到系统任务栏
下面的代码设置窗体的关闭按钮事件,当点击标题栏中的"X"时,程序缩到任务栏上:首先添加一个NotifyIcon控件,参考如下属性代码: private System ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...

html中点击照片时放大缩小,基于jquery实现一张图片点击鼠标放大再点缩小

html中点击照片时放大缩小,基于jquery实现一张图片点击鼠标放大再点缩小相关推荐

最新文章

热门文章