码迷,mamicode.com
首页 > 其他好文 > 详细

JGUI源码 鼠标中键滚动再次优化

时间:2019-02-26 11:44:59      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:lan   animate   efi   row   handle   anim   time   near   detail   

var startmousewheeldatetime = (new Date()).valueOf();
//电脑端中键滚动事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$(‘.jgui-accordion‘).on(mousewheel, function (event) {
    startmousewheel = (new Date()).valueOf()
    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);
        var obj = $(this);
        var handle = function () {
            var step = Math.floor(obj.height() / 10);//可视区高度
            var cur_top = obj.scrollTop();    //当前滚过的高度
            var curdatetime = (new Date()).valueOf();
            if ((curdatetime - startmousewheeldatetime > 500) && (datas.sumdelta != 0)) {//500ms内没有移动滚轮
                direction = datas.sumdelta;
                datas.sumdelta = 0;
                obj.stop().animate(
                    {
                        scrollTop: direction * Math.abs(direction) * step + cur_top
                    },
                    400,
                    ‘linear‘,
                    function () {
                        clearInterval(datas.mouseinterval);
                        datas.mouseinterval = undefined;

                    }
                );

            }
        }
        if (datas.mouseinterval == undefined) {
            datas.mouseinterval = setInterval(handle, 100);
        }
    }
    stopPropagation(event);
});
$.fn.jAccordion = function (p_options, p_datas, p_param) {
    return this.each(function () {
        var obj = $(this);
        var datas = $.extend({
            sumdelta: 0, mouseinterval: undefined
        }, p_datas);
        obj.data(‘datas‘, datas);
    });
};
$(".jgui-accordion").jAccordion();

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

JGUI源码 鼠标中键滚动再次优化

标签:lan   animate   efi   row   handle   anim   time   near   detail   

原文地址:https://www.cnblogs.com/zhaogaojian/p/10436234.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!