网页中图片大小自动调整三种方法
1.鼠標(biāo)滾動(dòng)圖片大小調(diào)整
<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.圖片自動(dòng)縮小到固定大小
<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,因?yàn)橛心?代碼變得更簡(jiǎn)單,加群請(qǐng)輸入cnblogs
總結(jié)
以上是生活随笔為你收集整理的网页中图片大小自动调整三种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： No injector for cust
- 下一篇： vivo手机清除数据密码是多少