一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以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="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/缩小的倍数
}本回答被网友采纳
求一个简单的点击图片放大缩小的JS代码
1、准备好需要用到的图标。2、新建html文档。3、书写hmtl代码。 。4、书写并添加js代码。<\/script。5、代码整体结构。6、查看效果。
js中怎么将图片的真实像素缩小
解决方案 1、用电脑打开一张图片 2、选择“打开方式”“画图工具” 3、点击“重新调整图片”进行设置图片像素，根据自己需求进行设置“百分比”“倾斜”角度和“像素”
js上传图片压缩-如何利用JS或者CSS样式来自动调整图片大小
html页面由前端实现,此处增加是为了配合图片单击放大图片功能的实现 2.2:js varimgSrc_other=[];varimgFile_other=[];functionadd_file_image(id){ varfileList=("file_"+id).files;\/\/js获取文件对象 if(verificationFile(fileList[0])){ for(vari=0;i varimgSrcI=getObjectURL(fileList[i...
如何利用JS或者CSS样式来自动调整图片大小
js版和css版自动按比例调整图片大小方法，分别如下：javascript图片大小处理函数var proMaxHeight = 150;var proMaxWidth = 110;function proDownImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ var rate = (proMaxWidth\/image.width...
canvas图片缩放-JS中canvas画布绘制中如何实现缩放,位移,旋转
设置了禁用插值。canvas是一款业内非常著名的ACD公司推出的一款顶级的矢量绘图软件,canvas中图片缩放禁用是因为设置了禁用插值,重新设置即可。canvas能够无缝集成用于绘画、图像编辑和Web设计的等工具,软件能够以多种的格式导出绘画作品。JS中canvas画布绘制中如何实现缩放，位移，旋转 (2,2);缩放的是整个画布...
js图片压缩到指定大小不变-java如何实现把一个大图片压缩到指定大小的图...
最后调用AffineTransformOp的BufferedImagefilter(BufferedImagesrc,BufferedImagedst),src传原图片,返回值就是想要的Image,注意是返回值,不是dst,不明白可以看下JavaAPI java如何实现把一个大图片压缩到指定大小的图片且长宽比不变？java要实现把一个大图片压缩到指定大小的图片且长宽比不变可以尝试以下操作:...
js如何实现鼠标滚轮缩放图片并且可以局部方法拖拽查看
缩小时获取图片宽高 var h = ...,w=...;然后再对宽高做一个限制就可以了
JS鼠标滚轮放大和缩小图片的问题~
这个要求把css写精细一点 我的想法是 为div和img添加onmouseover事件 监听到这个事件时再为这个事件的响应元素添加onmousewheel事件 在onmouseout事件中将放大缩小的响应移除 这里要求img所在层要高于div，即让img响应onmouseover事件但不让下层的div响应 单个图片最好使用绝对定位，以免放大缩小造成整个图片集合的...
js实现在网页上图片放大缩小,剪裁
;break;case "变宽":divIp.style.width = "400px";break;case "变色":divIp.style.backgroundColor = "red";break;case "隐藏":divIp.style.display = "none";break;default:divIp.style.cssText = "";} } } 剪裁就不知道了，希望这个对你有用。
用visual studio 2005怎么来实现网页中图片的放大放小
这种属于客户端技术，应该首先想到用js来实现。这里给你一个鼠标滚动缩放图片大小的js来参考：第一个函数图片载入时自动调整大小，防止大图片撑开网页(此处为对所有宽大于400的图片进行自动处理)，第二个函数实现鼠标滚动调整图片大小。将以下代码复制到记事本另存为.html文件就可以看到效果:\/\/改变图片大小,...
