. 代碼如下:

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实现一张图片点击鼠标放大再点缩小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。