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
JGUI源码:鼠标中键滚动再次优化(5)的更多相关文章
- JGUI源码:从头开始,建一个自己的UI框架(1)
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- [转]MySQL源码:Range和Ref优化的成本评估
MySQL源码:Range和Ref优化的成本评估 原文链接:http://www.orczhou.com/index.php/2012/12/mysql-source-code-optimizer-r ...
- [源码解析] PyTorch分布式优化器(1)----基石篇
[源码解析] PyTorch分布式优化器(1)----基石篇 目录 [源码解析] PyTorch分布式优化器(1)----基石篇 0x00 摘要 0x01 从问题出发 1.1 示例 1.2 问题点 0 ...
- [源码解析] PyTorch分布式优化器(2)----数据并行优化器
[源码解析] PyTorch分布式优化器(2)----数据并行优化器 目录 [源码解析] PyTorch分布式优化器(2)----数据并行优化器 0x00 摘要 0x01 前文回顾 0x02 DP 之 ...
- [源码解析] PyTorch分布式优化器(3)---- 模型并行
[源码解析] PyTorch分布式优化器(3)---- 模型并行 目录 [源码解析] PyTorch分布式优化器(3)---- 模型并行 0x00 摘要 0x01 前文回顾 0x02 单机模型 2.1 ...
- JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
- JGUI源码:Tip实现(14)
tip是当鼠标放到控件上显示的提示文本,下面说下实现思路方法一: 使用hover:before,hover:after组合一个三角符号和一个圆角矩形实现,以右三角为例 .jgui-tip:after ...
- JGUI源码:右键菜单实现(12)
1.要想实现右键菜单,就要先能响应右键函数 $('#down').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else i ...
随机推荐
- ZooInspector 连接不到 Zookeeper 的解决方法
Zookeeper正常启动后,在使用 ZooInspector 连接 Zookeeper 时出现了连接不上的问题. [root@localhost bin]# zkServer.sh start Zo ...
- 如何删除windows中运行的历史记录
参照下图进入到注册表,依次打开红圈中的路径,在RunMRU里面列出来的全部是记录,全部删除即可
- mmap:速度快+整块操作
mmap使得可以将设备内存映射到用户空间,从而使得用户程序获得访问硬件的能力,mmap的动作需要由内核中的驱动来实现.在使用mmap映射后,用户程序对给定范围的内存的读写就变成了对设备内存的读写,也就 ...
- 使用springMVC时的web.xml配置文件
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " ...
- UUID简记
一.概述 wiki上的解释: A universally unique identifier (UUID) is a 128-bit number used to identify informati ...
- MariaDB第四章:视图,事务,索引,外键--小白博客
视图 对于复杂的查询,在多个地方被使用,如果需求发生了改变,需要更改sql语句,则需要在多个地方进行修改,维护起来非常麻烦 假如因为某种需求,需要将user拆房表usera和表userb,该两张表的结 ...
- 循环语句--do...while
do...while循环 格式: 执行流程 执行顺序:①③④>②③④>②③④…②不满足为止. ①负责完成循环变量初始化. ②负责判断是否满足循环条件,不满足则跳出循环. ③具体执行的语句 ...
- docker(三) 镜像和容器常用命令
一.镜像操作 1.搜索镜像 可以直接在Docker Hub 直接搜索镜像,当然也可以使用命令来搜索. docker search 名称 docker search tomcat 2.拉取镜像 dock ...
- css清除默认样式,stylus学习
reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, ...
- Python的数据库操作
使用原生SQL语句进行对数据库操作,可完成数据库表的建立和删除,及数据表内容的增删改查操作等.其可操作性很强,如可以直接使用“show databases”.“show tables”等语句进行表格之 ...