zoukankan      html  css  js  c++  java
  • JGUI源码:鼠标中键滚动再次优化(5)

    //电脑端中键滚动事件
    var mousewheel =
      getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
    $(".jgui-accordion").on(mousewheel, function(event) {
      var delta = 0;
      var direction = 0;
      if (!event)
        /* For IE. */
        event = window.event;
      if (event.originalEvent.wheelDelta) {
        /* IE/Opera. */
        delta = event.originalEvent.wheelDelta / 120;
      } else if (event.originalEvent.detail) {
        delta = -event.originalEvent.detail / 3;
      }
      if (delta) {
        var datas = $(this).data("datas");
        datas._sumdelta += delta > 0 ? -1 : 1;
        datas._startmousewheeldatetime = new Date().valueOf();
        var obj = $(this);
        var handle = function() {
          var step = Math.floor(obj.height() / 10); //可视区高度
          var cur_top = obj.scrollTop(); //当前滚过的高度
          if (new Date().valueOf() - datas._startmousewheeldatetime > 100 && datas._sumdelta != 0) {
            //100ms内没有移动滚轮
            direction = datas._sumdelta;
            datas._sumdelta = 0;
            obj.stop().animate(
              {
                scrollTop: direction * Math.abs(direction) * step + cur_top
              },
              400,
              "linear",
              function() {
                clearInterval(datas._mouseintervalhandle);
                datas._mouseintervalhandle = undefined;
              }
            );
          }
        };
        if (datas._mouseintervalhandle == undefined) {
          datas._mouseintervalhandle = setInterval(handle, 10);
        }
      }
      stopPropagation(event);
    });
    

    之前文章:
    JGUI源码:Accordion鼠标中键滚动和手机端滑动实现
    https://www.cnblogs.com/zhaogaojian/p/10421950.html
    之前代码有时候会卡一下,现在将之前的Timer实现方式改成Interval,判断中键间隔事件内没有滚动后再做animate,响应度提升了一个档次。
    演示地址:www.jgui.com

  • 相关阅读:
    leetcode刷题-54螺旋矩阵
    leetcode刷题-53最大子序和
    leetcode刷题-52N皇后2
    leetcode刷题-51N皇后
    leetcode刷题-50Pow(x, n)
    leetcode刷题-37解数独
    leetcode刷题-49字母异位词分组
    leetcode刷题-48旋转图像
    数据结构—B树、B+树、B*树
    LeetCode–旋转数组的最小数字
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/10436234.html
Copyright © 2011-2022 走看看