3个回答
展开全部
一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦
以下为全部代码：
<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:350px; overflow: auto;">
<img id="headImg" src="
<button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);">放大</button>
<button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);">缩小</button>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<input type="button" value="缩小" onclick="small1()">
<input type="button" value="放大" onclick="big1()">
<br>
<BR>
<img border="0" name=images1 src="图片路径" >
<script>
function small(){
var height1=images0.height
var width1=images0.width
images0.height=height1/缩小的倍数
images0.width=width1/缩小的倍数
}
<input type="button" value="放大" onclick="big1()">
<br>
<BR>
<img border="0" name=images1 src="图片路径" >
<script>
function small(){
var height1=images0.height
var width1=images0.width
images0.height=height1/缩小的倍数
images0.width=width1/缩小的倍数
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
