js滚轮和键盘事件

最新推荐文章于 2022-10-26 09:14:53 发布

SpaceX7_s

最新推荐文章于 2022-10-26 09:14:53 发布

阅读量1.2k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45842954/article/details/121962700

版权

滚轮

当鼠标在元素内滚动的时候，根据鼠标的移动方向使元素的可视高度发生变化

 <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
    <script>
       window.onload = function() {

         var box1 = document.getElementById('box1');
         //给box1绑定一个滚轮事件
         box1.onwheel = function(event) {
             //判断鼠标滚轮的滚动方向
             //向上滚120 ，向下滚-120
            event.wheelDelta;
            if(event.wheelDelta>0){
                box1.style.height = box1.clientHeight - 10+'px';
            } else{
                box1.style.height = box1.clientHeight + 10 +'px';
            }
         }

       }
     
     
    </script>
</head>
<body>
    <div id="box1"></div>
</body>

键盘

获取键盘按下的哪个键，返回对应的编码，可以根据编码进行一些操作

主要是两个方法 1. onkeydown 按下键盘 2.onkeyup松开键盘它们利用document. 来调用

 <style>
      #box1 {
        width: 100px;
        height: 100px;
        background-color: brown;
        position: absolute;
      }
    </style>
    <script>
      window.onload = function () {
        var box1 = document.getElementById("box1");
        document.onkeydown = function (event) {
          console.log(event.keyCode);
          switch (event.keyCode) {
            case 37:
              box1.style.left = box1.offsetLeft - 10 + "px";
              break;
            case 39:
              box1.style.left = box1.offsetLeft + 10 + "px";
              break;
            case 38:
              box1.style.top = box1.offsetTop - 10 + "px";
              break;
            case 40:
              box1.style.top = box1.offsetTop + 10 + "px";
              break;
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="box1"></div>
  </body>