js实现图片放大缩小

前端APP 投稿 10600 0 评论

js实现图片放大缩小

js实现图片放大缩小,点击放大按钮不松鼠标,图片会不断的逐渐放大,当然也可以点一下放大一点,点击缩小按钮则反之,具体代码如下:


<html xmlns="https://www.feishuai.vip/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="https://www.feishuai.vip/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实现图片放大缩小

赞同 (66) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽