网页中图片大小自动调整三种方法
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
- 下一篇： SAP Spartacus的url pa