ホームページ  >  記事  >  ウェブフロントエンド  >  マウスをクリックしてズームインしてからズームアウトすることで、jquery に基づいて画像を実装します_jquery

マウスをクリックしてズームインしてからズームアウトすることで、jquery に基づいて画像を実装します_jquery

WBOY
WBOYオリジナル
2016-05-16 17:21:091465ブラウズ
复制代码代码如下:








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); ).height() h);
moveImg(10, 10);
else
{
isopen = false; ).width() - w);
$(this).height($(this).height() - h);
moveImg(-10, -10);
});
});
//移位
i = 0;
function moveImg(left,top)
{
var offset = $(newImg).offset();
$(newImg).offset({ 上: offset.top 上、左: offset.left 左});
if (i == 10)
{
i =0;
戻る;
}
setTimeout("moveImg(" left "," top ")", 10);
私;
}











声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。