图片随着鼠标滑轮改变大小

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 997 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #javascript #function #border #css

js 专栏收录该内容

0 篇文章

订阅专栏

该博客主要展示了使用JavaScript实现图片缩放交互的代码。通过定义`resizeimg`、`Counting`和`Resize`等函数，利用鼠标滚轮事件控制图片缩放比例，还设置了缩放范围，同时实现了图片的双击还原、单击在新窗口查看等功能。

</STYLE>

<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;
if (newzoom>50) newzoom=50;
return newzoom;
}
function Resize(oImage,newzoom){
oImage.style.zoom = newzoom + '0%';
count=newzoom;
}
</SCRIPT>

<DIV><IMG src="1.gif"><BR><IMG
      onmousewheel="return resizeimg(this)"
      ondblclick="return Resize(this,10);return false;"
      onclick="if(this.alt) window.open(/1.jpg');"
      alt=鼠标中键放大缩小,单击在新窗口察看 src="1jpg"
      onload="javascript:if(this.width>screen.width-333) this.width=screen.width-333"
      border=0> </DIV>