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 ...
随机推荐
- LeetCode算法题-Reverse Words in a String III(Java实现)
这是悦乐书的第259次更新,第272篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第126题(顺位题号是557).给定一个字符串,您需要反转句子中每个单词中的字符顺序,同 ...
- Error:Cannot run program "svn" (in directory "E:demo\Hello"): CreateProcess error=2,
file-->settings-->version controller --> subversion
- spring上下文和springMVC上下文的关系
查看原文
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 对分类型变量,进行编码处理——pd.get_dummies()、LabelEncoder()、oneHotEncoder()
背景: 在拿到的数据里,经常有分类型变量的存在,如下: 球鞋品牌:Nike.adidas. Vans.PUMA.CONVERSE 性别:男.女 颜色:红.黄.蓝.绿 However,sklearn大佬 ...
- 2.[Andriod]Andriod Studio结合Visual Studio Emulator for Android调试Android App
0. 工欲善其事必先利其器 上一篇博客对比了一下Android和WinPhnoe的布局容器,后续篇章重点放在Android的开发上了. 说到开发就绕不开调试程序,调试Android App我们有2种选 ...
- Neutron flat network 学习
flat network 是不带 tag 的网络,要求宿主机的物理网卡直接与 linux bridge 连接,这意味着: 每个 flat network 都会独占一个物理网卡. 在 ML2 配置中 ...
- Linux重启命令
Linux和windows不同,linux后台运行着许多进程,所以强制关机可能会导致进程的数据丢失使系统处于不稳定的状态.甚至在有的系统中会损坏硬件设备.而在系统关机前使用shutdown命令,系统管 ...
- 【学习总结】Git学习-本地仓库覆盖式更新对于Git仓库的影响以及pull/push到GitHub
< 许久不用Git之后的探索 > 准备日常更新自己的GitHub了.但是编写的文件平时不放在Git仓库路径下. 故测试覆盖式更新对于仓库是否有影响 直接说结论: 通过对已有库的测试发现覆盖 ...
- python语法与c++不同点
代码结构由':'号和缩进 来标示. 函数: def 定义 不定参数: *args: tarple可逐个传, 整体传, *拆包传 **kwargs dict可逐个传, 整体传, ** 拆包传, 有2 ...