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;
      }
      #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>

HTML鼠标滚轮事件相关推荐

JS 处理鼠标滚轮事件
为什么80%的码农都做不了架构师?>>> /* 鼠标滚轮事件 */ var onMouseScroll = function(e) {/* 向上滚为负数 */var direc ...
android鼠标滚轮事件坐标,android 处理鼠标滚轮事件【转】
android处理鼠标滚轮事件,并不是如下函数: 1) public boolean onKeyDown(int keyCode, KeyEvent event) 2) public boo ...
java响应鼠标滚轮事件_一文读懂鼠标滚轮事件（wheelEvent）
最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找到了一篇陈旧的博文(其实是主题 ...
JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
js中的鼠标滚轮事件
## 事件对象 event1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)window.onclick = functi ...
鼠标滚轮事件及解决滚轮事件多次触发问题
转载:https://www.cnblogs.com/jjxhp/p/11736066.html#_label0 一.滚轮事件的 js 写法二.jQuery写法三.参考四.滚轮事件滚动过快,事件 ...
android 处理鼠标滚轮事件【转】
android处理鼠标滚轮事件,并不是如下函数: 1) public boolean onKeyDown(int keyCode, KeyEvent event) 2) public boo ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
Python+matplotlib响应鼠标滚轮事件调整图形大小
2021年全国高校Python课程高级研修班(线上) 中国大学MOOC"Python程序设计基础"第4次开课推荐图书: <Python程序设计(第3版)>,(ISBN ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...

HTML鼠标滚轮事件

HTML鼠标滚轮事件相关推荐

最新文章

热门文章