js实现图片放大缩小,点击放大按钮不松鼠标,图片会不断的逐渐放大,当然也可以点一下放大一点,点击缩小按钮则反之,具体代码如下:
<html xmlns="http://www.phpernote.com/php-function/1000.html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript控制图片缩小或者放大</title> </head> <body> <script type="text/javascript"> var oTime; function changeSize(id,action){ var obj=document.getElementById(id); obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%'; oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100); } document.onmouseup=function(){ window.clearTimeout(oTime); } </script> <div style="height: 200px; overflow: auto;"> <img id="headImg" src="http://www.phpernote.com/images/logo.gif" width="67" height="55" style="zoom: 100%;"></div> <button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);">放大</button> <button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);">缩小</button> </body> </html>