HTML鼠标滚轮事件

最新推荐文章于 2024-07-26 20:46:33 发布

Playful_Elbow

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量2.1k

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124228595

版权

<!DOCTYPE html>
<html>
<head>
    <title>其他事件</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .msg{
        width:600px;
         margin:100px auto 0px auto;
         color:#ff0000;
      }
      #view_box{
         position:relative;

        width:600px;
         height:300px;
         margin:10px auto;

         background-color:#000000;
         background-image:url("res/lianxi/sheji/bg1.jpg");
         background-position:center;
         background-repeat:no-repeat;
         background-size:cover;
      }
    </style>

</head>
<body>

    <div class="msg">提示：利用鼠标滚轮切换图片</div>

    <div id="view_box">

    </div>
    <script type="text/javascript">

      var index = 1;//图片id

      //添加滚轮事件
      document.getElementById("view_box").addEventListener('DOMMouseScroll',mousewheel,false);//firefox
      document.getElementById("view_box").onmousewheel = mousewheel;//chrome
      function mousewheel(e){
          //补全滚轮事件
           e.preventDefault();//通知浏览器不执行默认的动作
          if(e.wheelDelta){
              //IE/Opera/Chrome
              if(e.wheelDelta < 0){
               //下
               index++;
              }
              else{
               //上
               index--;
              }
          }
          else if(e.detail){
              //Firefox
              if(e.detail < 0){
               //上
               index--;
              }
              else{
               //下
               index++;
              }
          }
          if(index > 8){
              index = 1;
          }
          if(index < 1){
              index = 8;
          }
            document.getElementById("view_box").style.backgroundImage = "url('res/lianxi/sheji/bg"+index+".jpg')";
      }
    </script>
</body>

</html>

Playful_Elbow

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML鼠标滚轮事件

<!DOCTYPE html><html> <head> <title>其他事件</title> <meta charset="utf-8" /> <style type="text/css"> .msg{ width:600px; margin:100px auto 0px auto; color:#ff0000;...
复制链接

扫一扫