网页中图片大小自动调整三种方法

最新推荐文章于 2022-04-05 10:21:50 发布

cxzhq2002

最新推荐文章于 2022-04-05 10:21:50 发布

阅读量4.3k

点赞数 1

文章标签： javascript

1.鼠标滚动图片大小调整

<body>
<script LANGUAGE="JAVASCRIPT">
function bbimg(o){
   var zoom=parseInt(o.style.zoom, 10)||100;

zoom+=event.wheelDelta/12;

if (zoom>0)

o.style.zoom=zoom+'%';

   return false;
}
</script>
<img src="123.jpg" οnlοad="javascript:if(this.width>screen.width-screen.width/2) this.style.width=screen.width-screen.width/2" onmousewheel="return bbimg(this)" >
</body>

2.图片自动缩小到固定大小

<body οnlοad="DrawImage(theimg)">
<script language="JavaScript">

</script>
<img src="123.jpg" width="1024" height="768" name="theimg">
</body>

3.滚轮图片缩放的代码

<script language="javascript">
var count = 10;
function resizeimg(oImage)
{
count = Counting(count);
Resize(oImage,count);
return false;
}
function Counting(newzoom){
if (event.wheelDelta >= 120)
newzoom++;
else if (event.wheelDelta <= -120)
newzoom--;
if (newzoom<2) newzoom=2; 只允许缩小到20%
if (newzoom>50) newzoom=50; 只允许放大到500%
return newzoom;
}
function Resize(oImage,newzoom){
oImage.style.zoom = newzoom + '0%';
count=newzoom;
}
</script>

然后在<img src="">中加入
onDblClick="return Resize(this,10);return false;"
onmousewheel="return resizeimg(this)"