HTML鼠标滚轮事件

最新推荐文章于 2024-05-24 14:55:20 发布
最新推荐文章于 2024-05-24 14:55:20 发布
阅读量2.1k 收藏 5
点赞数
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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中鼠标滚轮事件onmousewheel的处理方法
09-01
下面小编就为大家带来一篇html中鼠标滚轮事件onmousewheel的处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
事件之事件类型-滚轮事件（WheelEvent）
xiaoyangzhu的博客
12-18 9233
一 定义 鼠标事件还有一个名为滚轮事件的子类别 滚轮事件只有一个事件 mousewheel，反映的是鼠标滚 轮或带滚轮的类似设备上滚轮的交互 二 客户端坐标 0、属性：clientX 和 clientY 1、定义： 鼠标事件都是在浏览器视口中的某个位置上发生的 这些信息被保存在 event 对象的clientX 和 clientY 属性中 这两个属性表示事件发生时鼠标光标在视口中的坐标，所有浏览器都支持 2、图示： 3、获取方式： // 可以通过下面的方式获取鼠标事件的客户端坐标
自定义ctrl+滚轮事件
最新发布
u014645827的博客
05-24 72
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。但是火狐浏览器不兼容此方法，火狐浏览器的鼠标滚轮滚动事件为 DOMMouseScroll()原文链接：https://blog.csdn.net/qq_42667613/article/details/115123715。-- html里我用的 angular写的，也可以直接在js中监听 mousewheel 方法 -->// 鼠标滚轮往下滚动。// 鼠标滚轮往上滚动。mousewheel事件。
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
weixin_39771987的博客
06-03 1655
滚轮事件是不同浏览器会有一点点区别，一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件，其他的浏览器滚轮事件使用mousewheel，下面我来给大家具体介绍。Firefox使用DOMMouseScroll，其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息，其...
html+两个滚轮,2 行 JS 代码实现页面横向滚动特效
weixin_39763683的博客
06-24 567
作者 | 峰华 责编 | 梦依丹出品 | 峰华的个人博客在前端这个无奇不有的世界里，有些网站不是正常垂直滚动的，而是横向滚动的：那么在没法把鼠标滚轮横过来的前提下(苹果除外)，能否实现网页横向滚动呢？我们来写代码试试。先看一下最终效果，这里我用鼠标的滚轮垂直滚动，页面是横向滚动的。要实现这个功能，只需要一点点的 JS 代码。编写 HTML 结构先看一下 HTML 结构，很简单，就是三个模拟全屏页面...
html鼠标滚动事件,鼠标滚动事件mousewheel（DOMMouseScroll）
weixin_28760183的博客
06-05 4465
滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;1.mousewheel事件中的 “event.wheelDelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。2. DOMMouseScroll事件中的 “event.detail”...
js捕获鼠标滚轮事件代码
10-26
在处理用户交互时，捕获鼠标滚轮事件是实现动态效果和提升用户体验的重要手段。本文将深入探讨如何使用JavaScript捕获鼠标滚轮事件，并通过一个实例来展示其实现过程。 首先，我们要了解JavaScript事件处理机制。在...
用HTML5实现鼠标滚轮事件放大缩小图片的功能
09-28
首先，大部分现代浏览器都支持鼠标滚轮事件。在监听这一事件时，可以通过`addEventListener`方法为元素添加事件处理程序。对于不支持`mousewheel`事件的Firefox，我们需要监听`DOMMouseScroll`事件。在示例代码中，...
JQ鼠标滚轮事件
01-22
其中，“JQ鼠标滚轮事件”是jQuery提供的一种方便的方式来监听和处理用户的鼠标滚轮动作。这个功能允许开发者在用户滚动鼠标滚轮时执行特定的代码，为网页添加更丰富的交互性。 首先，我们来理解一下鼠标滚轮事件的...
js中鼠标滚轮事件详解(firefox多浏览器)
10-29
在JavaScript中，处理鼠标滚轮事件是一项常见的任务，尤其在创建交互式网页时。滚轮事件允许我们响应用户通过鼠标滚轮进行的上下滚动操作。然而，不同浏览器对滚轮事件的支持和处理方式有所不同，这需要开发者进行...
前端基础入门之JS 事件对象 滚轮事件与键盘事件
热门推荐
LoveSummer
06-27 1万+
HTML 代码 CSS 代码 JS 代码 效果内置浏览器ChromeEdgeIE11 IE8在IE8中，响应函数被触发时，浏览器不会传递事件对象在IE8及以下的浏览器中，是将事件对象作为对象的属性保存的那么按照之前学习到的思路，我们可以对其进行兼容性改造 IE8测试感觉上述代码不优雅，对上述代码进行二次改造 但是，当我们给body设置一个较大属性值时，会发现一个问题，就是鼠标指针与 di...
html滚轮怎么设置,HTML编程，如何设置滚动条的位置？
weixin_36350504的博客
06-27 2640
回答：Axure添加滚动条步骤如下：1、第一步，新建一个“垂直线”，命名为“滚动条”，这里设置为“隐藏”状态；“动态面板”命名为“框架”；“动态面板”的state1内容组合下，命名为"内容"。2、第二步，设置“滚动条”的“载入时”的交互动作：设置“滚动条”的大小。3、第三步，设置“元件：框架”为局部变量LVAR1；设置“元件：内容”为局部变量LVAR2；所以“滚动条”的高为[[LVAR1.heig...
html鼠标滑轮事件,JavaScript系列之鼠标滚轮事件
weixin_39768371的博客
06-04 301
鼠标滚轮事件当在被绑定的对象上(如：某个div或者doucument)发生鼠标滚轮滚动时触发。在不同的浏览器中有不同的表现形式：一、ie/chrome下的事件 :　onmousewheel事件绑定方式：on 或者 addEventListener[attachEvent]获取滚轮事件具体信息：event.wheelDelta向上滚动up：120向下滚动down: -120二、firefox 下的事...
HTML滚动条样式代码及使用技巧
thgj0006的博客
03-19 3898
它用来指示按钮或者内层轨道是否会减小视窗的位置（比如，垂直滚动条的上面，水平滚动条的左边。​:increment – increment​伪类和​decrement​类似，用来指示按钮或内层轨道是否会增大视窗的位置（比如，垂直滚动条的下面和水平滚动条的右边。滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.另外，​:enabled​、​:disabled​、​:hover​ 和 ​:active​ 等伪类同样可以用于滚动条中。
基于web API之WheelEvent API的鼠标滚轮事件，制作全屏页面无缝滚动效果
在无知中学习，在学习中成长，在成长中学习
05-30 267
基于web API之WheelEvent API的鼠标滚轮事件，制作全屏页面无缝滚动效果
面试必过秘诀，HTML中鼠标滚轮事件onmousewheel处理(1)，小白都会
2401_83740189的博客
04-09 709
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！一个人可以走的很快，但一群人才能走的更远。
html js 捕捉鼠标右键事件，按下滚轮事件，左键点击事件
iBoy0v0的博客
03-29 772
【代码】html js 捕捉鼠标右键事件，按下滚轮事件，左键点击事件。
监测鼠标滚轮事件vue
08-12
在Vue中监测鼠标滚轮事件可以通过使用`@wheel`指令来实现。 首先，在模板中添加一个元素，并绑定`@wheel`指令： ```html <template> <div @wheel="handleScroll"> <!-- 页面内容 --> </div> </template> ``` 然后，在Vue实例中定义`handleScroll`方法来处理滚轮事件： ```javascript <script> export default { methods: { handleScroll(event) { // 获取滚动的方向 const direction = event.deltaY > 0 ? 'down' : 'up'; // 执行相应操作 if (direction === 'down') { // 向下滚动时的逻辑 } else { // 向上滚动时的逻辑 } } } } </script> ``` 在`handleScroll`方法中，可以通过`event.deltaY`来获取滚轮的滚动量，正值表示向下滚动，负值表示向上滚动。根据滚动的方向，可以执行相应的操作。 注意：如果需要在特定的元素上监听鼠标滚轮事件，可以将`@wheel`指令绑定在该元素上，同样在对应的方法中处理滚轮事件。 这是一种基本的实现方式，你可以根据具体的需求进行相应的调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值