• jquery 鼠标滚轮事件 插件 Mousewheel


     jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。

     
    使用mousewheel事件有以下两种方式:
     
    使用mousewheel和unmousewheel事件函数;
    使用经典的bind和unbind函数。
     
    JavaScript Code复制内容到剪贴板
    1. $('div.mousewheel_example').mousewheel(fn);  
    2. $('div.mousewheel_example').bind('mousewheel', fn);  
    mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event外,还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的,那么滚轮就是向下滚动,正的就是向上。
     
    以下是示例的源代码:
    JavaScript Code复制内容到剪贴板
    1. jQuery(function($) {  
    2.     $('div.mousewheel_example')  
    3.         .bind('mousewheel', function(event, delta) {  
    4.             var dir = delta > 0 ? 'Up' : 'Down',  
    5.                 vel = Math.abs(delta);  
    6.             $(this).text(dir + ' at a velocity of ' + vel);  
    7.             return false;  
    8.         });  
    9. });  
    jquery的鼠标滚轮插件 Mousewheel下载
     
    使用
    要使用这个功能,只需对目标元素的’mousewheel’事件绑定事件处理函数即可。
     
    Mousewheel插件还提供了两个事件函数:mousewheel和unmousewheel,可以对目标元素调用这两个函数,并在参数中指定回调函数。
     
    事件的回调函数第一个参数为event,第二个参数为delta,代表鼠标滚轮的变化值。
     
    以下是上面两种使用方式的示例:
     
    JavaScript Code复制内容到剪贴板
    1. // 绑定方式  
    2. $('#my_elem').bind('mousewheel', function(event, delta) {  
    3.     console.log(delta);  
    4. });  
    5.   
    6. // 事件函数方式  
    7. $('#my_elem').mousewheel(function(event, delta) {  
    8.     console.log(delta);  
    9. });  
      在发生滚轮滚动事件时,如果要设置屏幕滚动高度,就应该使用animate运动设置 scrollTop 来做。直接设置 window 的scrollTop不能达到效果。总会会出多点来。
    10. $(window).on('mousewheel', function(event, delta) {  
              //var direction = delta > 0 ? 'Up' : 'Down';
              var step = $(window).height();            //可视区高度
              var cur_top = $(window).scrollTop();    //当前滚过的高度
              var direction = delta > 0 ? -1 : 1;
              var height = direction * step + cur_top;
              var x_height = Math.floor(height/step)*step;    //滚过整数倍的可视区大小
              
              $("html, body").stop().animate({ scrollTop: x_height }, 400);    
      
              return false;  
          });
  • 相关阅读:
    软工实践4
    软工实践3
    软工实践1
    《暗时间》读书笔记
    关系规范化(数据库)
    关于Git的初步使用
    软件体系结构模式
    第六周编程总结
    第五周编程总结
    第四周编程总结
  • 原文地址:https://www.cnblogs.com/lxpursue/p/3914230.html
Copyright © 2020-2023  润新知