Rumah > hujung hadapan web > tutorial js > 基于jquery实现一张图片点击鼠标放大再点缩小_jquery

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

WBOY
Lepaskan: 2016-05-16 17:21:09
asal
1475 orang telah melayarinya
复制代码 代码如下:







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









Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan