onmousewheel event缩放图片效果

最新推荐文章于 2023-03-08 11:52:46 发布

lzf1988119

最新推荐文章于 2023-03-08 11:52:46 发布

阅读量776

点赞数

CC 4.0 BY-SA版权

分类专栏：图片效果文章标签： function image html div url

本文链接：https://blog.youkuaiyun.com/lzf1988119/article/details/4324922

图片效果专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用鼠标滚轮事件(onmousewheel)实现图片缩放效果的方法。通过JavaScript编程，当用户滚动鼠标滚轮时，图片可以相应地放大或缩小。此效果适用于网页中的互动元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>onmousewheel event缩放图片效果</TITLE>
<SCRIPT>
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta <= -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + '0%';
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#e7d5cd">
<div align=center>onmousewheel event缩放图片效果<br>例子使用onmousewheel事件展示图片的缩放效果

<img id="oImage" src="image url" onmousewheel="return Picture();" style="cursor:hand" >
</div>
</BODY>
</HTML>