JavaScript 鼠标滚轮事件把div拉长

最新推荐文章于 2022-04-19 15:48:16 发布

weixin_30856965

最新推荐文章于 2022-04-19 15:48:16 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangdongwei/p/11295077.html

版权

<!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>

转载于:https://www.cnblogs.com/wangdongwei/p/11295077.html

weixin_30856965

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 鼠标滚轮事件把div拉长

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #...
复制链接

扫一扫