星期五, 2022-07-29 07:41 — adminshiping1

$(...).mousewheel is not a function 是由于没有这个 jquery.mousewheel.js 文件

jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）这个例子经自己亲自做的的有大用

2017-11-25发布：hangge阅读：33870

1，插件介绍

jquery.mousewheel.js 是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery 插件。

GitHub主页：https://github.com/jquery/jquery-mousewheel

2，使用说明

（1）使用该插件，只需将 mousewheel 事件绑定到一个元素上即可。当然也可以使用类似 jQuery 中其他的事件方法写法。下面列出这两种方式：

// 方式1：using on

$('#my_elem').on('mousewheel', function(event,delta) {

console.log(event.deltaX, event.deltaY, event.deltaFactor);

console.log(delta);

});

// 方式2：using the event helper

$('#my_elem').mousewheel(function(event,delta) {

console.log(event.deltaX, event.deltaY, event.deltaFactor);

console.log(delta);

});

（2）事件对象中可以获取如下三个属性值：

deltaX：值为负的（-1），则表示滚轮向左滚动。值为正的（1），则表示滚轮向右滚动。
deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。
deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。

（3）如果想要对整个窗口进行滚轮事件监听，可以将监听添加在 window 上。

$(window).mousewheel(function(event,delta) {

console.log(event.deltaX, event.deltaY, event.deltaFactor);

console.log(delta);

});

3，使用样例

（1）效果图

黄色的 div 方块使用绝对定位放置在页面中。
当我们鼠标移动到方块上时，通过上下滚动滚轮可以控制方块上下移动。而左右滚动滚轮可以控制方块的左右移动。

原文:jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）

（2）样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="jquery-3.1.1.js"></script>
    <script src="jquery.mousewheel.js"></script>
    <style>
      #cube {
          width: 150px;
          height: 150px;
          position: absolute;
          top: 10px;
          left: 65px;
          background: yellow;
          opacity: 0.5;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        //使用on监听滚轮事件
        $('#cube').on('mousewheel', function(event) {
            //输出滚轮事件响应结果
            console.log(event.deltaX, event.deltaY, event.deltaFactor);
            //上下滚动时让鼠标垂直移动
            var newTop = $(this).position().top - event.deltaY + "px";
            $(this).css("top", newTop);
            //左右滚动时让鼠标水平移动
            var newLeft = $(this).position().left + event.deltaX + "px";
            $(this).css("left", newLeft);
        });
      });
    </script>
  </head>
  <body>
    <div id="cube"></div>
  </body>
</html>

原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1863.html

来自 https://www.hangge.com/blog/cache/detail_1863.html

第三十二节 jQuery之鼠标滚轮事件

<!-- 函数节流：
 2         JavaScript中有些事件触发频率是非常高的，比如onresize事件（jq中的resize），onmousemove事件（jq中的mousemove）以及鼠标滚轮事件，在短时间内多次触发执行绑定的函数，可以巧妙的用定时器来减少触发的次数，实现函数节流 -->
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>Document</title>
 8     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
 9     <script type="text/javascript">
10         $(function(){
11             $ timer = null;
12             $(window).mousewhell(function(event,data){
13                 // event代表事件本身，data代表滚轮每滚动一次的值，向上是1，向下是-1
14                 // 鼠标多次滚动，设置了200ms的缓冲时间，这里先清空定时器，还未执行的就不会在执行了，只会执行此次
15                 clearTimeout(timer);
16                 timer = setTimeout(function(){
17                     // 鼠标滚动时要执行的代码
18                 },200)
19             })
20         });
21     </script>
22 </head>
23 <body>
24     
25 </body>
26 </html>