JavaScript 鼠标滚动div随之增大或缩小

最新推荐文章于 2024-08-14 15:52:52 发布

禾子不枯萎

最新推荐文章于 2024-08-14 15:52:52 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/haojieji/article/details/126511617

版权

本文介绍如何利用JavaScript监听鼠标的滚轮事件，结合CSS实现div元素在鼠标滚动时动态改变大小的效果。通过示例代码详细解析实现过程，帮助前端开发者掌握这一交互技巧。

摘要由CSDN通过智能技术生成

 <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            //绑定滚轮事件
            //onmousewheel鼠标滚轮事件会在滚轮滚动时触发但火狐不支持
            //火狐使用DOMMouseScroll来绑定滚轮事件但该事件需要addEventListener()
            box1.onmousewheel=function(event){
                event=event||window.event;
                //判断滚轮滚动方向
                //wheelDelta获取到鼠标滚动方向，向上滚是正值，向下是负值，但火狐不支持
                //event.detail火狐支持，向上为负值，向下为正值
                if(event.wheelDelta>0 || event.detail<0){
                    box1.style.height=box1.clientHeight-10+"px";
                }else{
                    box1.style.height=box1.clientHeight+10+"px";
                }

                //当滚轮滚动，如果浏览器有滚动条，滚