页面中，鼠标滑轮滚动，图片方法的代码

最新推荐文章于 2021-06-04 18:24:13 发布

Jason_Wzlong

最新推荐文章于 2021-06-04 18:24:13 发布

阅读量1k

点赞数

分类专栏： Java学习之路

Java学习之路专栏收录该内容

22 篇文章

订阅专栏

博客提供了页面中滑轮滚动时处理图片的方法代码，方便后续查看使用，还展示了效果图。

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

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img border="0" src="demo.jpg" onmousewheel="return rollImg(this)">
</body>
<script language="javascript">
function rollImg(o){
    /* 获取当前页面的缩放比
        若未设置zoom缩放比，则为默认100%，即1，原图大小
    */ 
    var zoom=parseInt(o.style.zoom)||100;
    /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
        wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
    */
    zoom+=event.wheelDelta/12;
    /* 如果缩放比大于0，则将缩放比加载到页面元素 */
    if (zoom>0) o.style.zoom=zoom+'%';
    /* 如果缩放比不大于0，则返回false，不执行操作 */
    return false;
}
</script>
</html>

挺好用的，拿过来方便以后用的时候查看，效果图