Apr
25
2014
js实现图片放大缩小
作者：
绝缘体.. 发布：
2014-04-25 15:52 分类：
未分类 阅读：
抢沙发
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>
微信扫一扫，打赏作者吧～
js实现图片放大缩小：等您坐沙发呢！
发表评论
