//电脑端中键滚动事件
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

JGUI源码:鼠标中键滚动再次优化(5)的更多相关文章

  1. JGUI源码:从头开始,建一个自己的UI框架(1)

    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...

  2. [转]MySQL源码:Range和Ref优化的成本评估

    MySQL源码:Range和Ref优化的成本评估 原文链接:http://www.orczhou.com/index.php/2012/12/mysql-source-code-optimizer-r ...

  3. [源码解析] PyTorch分布式优化器(1)----基石篇

    [源码解析] PyTorch分布式优化器(1)----基石篇 目录 [源码解析] PyTorch分布式优化器(1)----基石篇 0x00 摘要 0x01 从问题出发 1.1 示例 1.2 问题点 0 ...

  4. [源码解析] PyTorch分布式优化器(2)----数据并行优化器

    [源码解析] PyTorch分布式优化器(2)----数据并行优化器 目录 [源码解析] PyTorch分布式优化器(2)----数据并行优化器 0x00 摘要 0x01 前文回顾 0x02 DP 之 ...

  5. [源码解析] PyTorch分布式优化器(3)---- 模型并行

    [源码解析] PyTorch分布式优化器(3)---- 模型并行 目录 [源码解析] PyTorch分布式优化器(3)---- 模型并行 0x00 摘要 0x01 前文回顾 0x02 单机模型 2.1 ...

  6. JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  7. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

  8. JGUI源码:Tip实现(14)

    tip是当鼠标放到控件上显示的提示文本,下面说下实现思路方法一: 使用hover:before,hover:after组合一个三角符号和一个圆角矩形实现,以右三角为例 .jgui-tip:after ...

  9. JGUI源码:右键菜单实现(12)

    1.要想实现右键菜单,就要先能响应右键函数 $('#down').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else i ...

随机推荐

  1. ZooInspector 连接不到 Zookeeper 的解决方法

    Zookeeper正常启动后,在使用 ZooInspector 连接 Zookeeper 时出现了连接不上的问题. [root@localhost bin]# zkServer.sh start Zo ...

  2. 如何删除windows中运行的历史记录

    参照下图进入到注册表,依次打开红圈中的路径,在RunMRU里面列出来的全部是记录,全部删除即可

  3. mmap:速度快+整块操作

    mmap使得可以将设备内存映射到用户空间,从而使得用户程序获得访问硬件的能力,mmap的动作需要由内核中的驱动来实现.在使用mmap映射后,用户程序对给定范围的内存的读写就变成了对设备内存的读写,也就 ...

  4. 使用springMVC时的web.xml配置文件

    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " ...

  5. UUID简记

    一.概述 wiki上的解释: A universally unique identifier (UUID) is a 128-bit number used to identify informati ...

  6. MariaDB第四章:视图,事务,索引,外键--小白博客

    视图 对于复杂的查询,在多个地方被使用,如果需求发生了改变,需要更改sql语句,则需要在多个地方进行修改,维护起来非常麻烦 假如因为某种需求,需要将user拆房表usera和表userb,该两张表的结 ...

  7. 循环语句--do...while

    do...while循环 格式: 执行流程 执行顺序:①③④>②③④>②③④…②不满足为止. ①负责完成循环变量初始化. ②负责判断是否满足循环条件,不满足则跳出循环. ③具体执行的语句 ...

  8. docker(三) 镜像和容器常用命令

    一.镜像操作 1.搜索镜像 可以直接在Docker Hub 直接搜索镜像,当然也可以使用命令来搜索. docker search 名称 docker search tomcat 2.拉取镜像 dock ...

  9. css清除默认样式,stylus学习

    reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, ...

  10. Python的数据库操作

    使用原生SQL语句进行对数据库操作,可完成数据库表的建立和删除,及数据表内容的增删改查操作等.其可操作性很强,如可以直接使用“show databases”.“show tables”等语句进行表格之 ...