网页中图片大小自动调整三种方法
1.鼠标滚动图片大小调整
<body>
<scriptLANGUAGE="JAVASCRIPT">
functionbbimg(o){
varzoom=parseInt(o.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0)
o.style.zoom=zoom+'%';
returnfalse;
}
</script>
<imgsrc="123.jpg"onload="javascript:if(this.width>screen.width-screen.width/2)this.style.width=screen.width-screen.width/2"onmousewheel="returnbbimg(this)">
</body>
2.图片自动缩小到固定大小
<bodyonload="DrawImage(theimg)">
<scriptlanguage="JavaScript">
<!--
//图片按比例缩放
varflag=false;
functionDrawImage(ImgD){
varimage=newImage();
variwidth=320;//定义允许图片宽度
variheight=180;//定义允许图片高度
image.src=ImgD.src;
if(image.width>0&&image.height>0){
flag=true;
if(image.width/image.height>=iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
<imgsrc="123.jpg"width="1024"height="768"name="theimg">
</body>
3.滚轮图片缩放的代码
<scriptlanguage="javascript">
varcount=10;
functionresizeimg(oImage)
{
count=Counting(count);
Resize(oImage,count);
returnfalse;
}
functionCounting(newzoom){
if(event.wheelDelta>=120)
newzoom++;
elseif(event.wheelDelta<=-120)
newzoom--;
if(newzoom<2)newzoom=2;////只允许缩小到20%
if(newzoom>50)newzoom=50;////只允许放大到500%
returnnewzoom;
}
functionResize(oImage,newzoom){
oImage.style.zoom=newzoom+'0%';
count=newzoom;
}
</script>
然后在<imgsrc="">中加入
onDblClick="returnResize(this,10);returnfalse;"
onmousewheel="returnresizeimg(this)"
千人.NET交流群:18362376,因为有你,代码变得更简单,加群请输入cnblogs
总结
以上是生活随笔为你收集整理的网页中图片大小自动调整三种方法的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： No injector for cust
- 下一篇： vivo手机清除数据密码是多少