首页 > 特效插件 > 滚动轮播 >  jquery.mousewheel.js全屏滚动插件正文

jquery.mousewheel.js全屏滚动插件

特效介绍
jquery.mousewheel.js全屏滚动插件

    jquery.mousewheel.js 是一个跨浏览器的非常非常轻量级的（压缩后只有3KB）支持鼠标滚轮的 jQuery 全屏滚动插件，使用简单，带回调函数。
使用方法
（1）使用该插件，只需将 mousewheel 事件绑定到一个元素上即可。当然也可以使用类似 jQuery 中其他的事件方法写法。下面列出这两种方式： 
// 方式1：using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
 
// 方式2：using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
（2）事件对象中可以获取如下三个属性值：
    deltaX：值为负的（-1），则表示滚轮向左滚动。值为正的（1），则表示滚轮向右滚动。
    deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。
    deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。

（3）如果想要对整个窗口进行滚轮事件监听，可以将监听添加在 window 上。 
$(window).mousewheel(function(event) {
   console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
DEMO
（1）效果图
    黄色的 div 方块使用绝对定位放置在页面中。
    当我们鼠标移动到方块上时，通过上下滚动滚轮可以控制方块上下移动。而左右滚动滚轮可以控制方块的左右移动。

（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>
TAGS: jquery.mousewheel.js  全屏  滚动  插件