您的位置：首页 > 其它

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

2008-07-12 21:21 471 查看

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" onload="javascript:if(this.width>screen.width-screen.width/2) this.style.width=screen.width-screen.width/2" onmousewheel="return bbimg(this)" >

</body>

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

<body onload="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)"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航