JavaScript 鼠标滚轮事件把div拉长 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #d01{
            width: 200px;
            height: 150px;
            background-color: green;
        }
    </style>
    <body style="height: 2000px;">
        <div id="d01">
            
        </div>
    </body>
    <script type="text/javascript">
        //当鼠标滚轮向下滚d01变长，向上滚变短
        var d01=document.getElementById("d01");
          //绑定一个鼠标滚轮滚动事件
        d01.onmousewheel=function(event){
//            alert("111");
            //event.wheelDelat 可以获取滚轮滚动方向 上滚为正值
            if(event.wheelDelta>0){
//                alert("向上滚");
                d01.style.height=d01.clientHeight-10+"px";
            }else{
//                alert("向下滚");
                d01.style.height=d01.clientHeight+10+"px";
            }
            
            //取消浏览器默认滚动条，不然会跟着事件以前滚动
            return false;
        }
    </script>
</html>

 

posted @ 2019-08-03 15:50  WideWang  阅读(728)  评论(0)  编辑  收藏  举报