本文目录一览：
- 1、怎么用js实现图片的缩小？
- 2、jS控制图片的放大和缩小?
- 3、求一个简单的点击图片放大缩小的JS代码
- 4、如何利用JS或者CSS样式来自动调整图片大小
- 5、js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽
怎么用js实现图片的缩小？
一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦
以下为全部代码：
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejavascript控制图片缩小或者放大/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
jS控制图片的放大和缩小?
图片按比例缩放
function DrawImage(Img,WIDTH,HEIGHT){
var image=new Image();
image.src=Img.src;
width=WIDTH;//预先设置的所期望的宽的值
height=HEIGHT;//预先设置的所期望的高的值
if(image.widthwidth||image.heightheight){//现有图片只有宽或高超了预设值就进行js控制
w=image.width/width;
h=image.height/height;
if(wh){//比值比较大==宽比高大
//定下宽度为width的宽度
Img.width=width;
//以下为计算高度
Img.height=image.height/w;
}else{//高比宽大
//定下宽度为height高度
img.height=height;
//以下为计算高度
Img.width=image.width/h;
}
}
}
img src="xxxx" onload=javascript:DrawImage(this,290,215);
求一个简单的点击图片放大缩小的JS代码
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。div id=allbox div id=boxhome img style="WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px" id=imgSmallLeft class=imgBorder onClick="clearInterval(autoplay);moveD('l');" 。
4、书写并添加js代码。script src="js/ntes_jslib_1.x.js"/scriptscript src="js/zzsc.js"/script。
5、代码整体结构。
6、查看效果。
如何利用JS或者CSS样式来自动调整图片大小
js版和css版自动按比例调整图片大小方法，分别如下：
titlejavascript图片大小处理函数/title
script language=Javascript
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width0 image.height0){
var rate = (proMaxWidth/image.width proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate = 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
/script
/head
body
img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this); /
img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this); /
/body
纯css的防止图片撑破页面的代码，图片会自动按比例缩小：
style type="text/css"
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width 600 ? "600px" : this.width)!important;}
/style
div class="content-width"
pimg src="/down/js/images/12567247980.jpg"//p
pimg src="/down/js/images/12567247981.jpg"//p
/div
js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽
div class="upload-img-box" ref="moveWrap"
div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)"
img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/
/div
div class="img-plus" @click="toBIgChange()"span class="tip"放大/span/div
div class="img-minus" @click="toSmallChange()"span class="tip"缩小/span/div
div class="img-rotate" @click="toRotate()"span class="tip"旋转/span/div
/div