提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery 实现 基于 图片 鼠标 点击 一张 放大
2023-06-13 09:15:06 时间
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="jquery-1.8.3.min.js"></script>
<script>
varisopen=false;
varnewImg;
varw=200;//将图片宽度+200
varh=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;
functionmoveImg(left,top)
{
varoffset=$(newImg).offset();
$(newImg).offset({top:offset.top+top,left:offset.left+left});
if(i==10)
{
i=0;
return;
}
setTimeout("moveImg("+left+","+top+")",10);
i++;
}
</script>
</head>

<body>
<divid="imgBox"style="width:100px;height:100px;background:#cccccc">
<imgid="img1"style="width:100px;height:100px;"alt=""src="photos/image1.jpg"/>
</div>
</div>
</body>
</html>

相关文章