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 ...
随机推荐
- SQLServr添加数据列
数据列定义 表中数据行的数据插入和数据类型都是基于数据列的,学会添加数据列在开发过程中是必不可少的. 使用SSMS数据库管理工具添加数据列 在数据表中添加一列或者多列步骤相同 1.连接数据库,选择数据 ...
- 【Python 07】汇率兑换1.0-2(基本元素)
1.Python基本元素 (1)缩进:表示代码层次关系(Python中表示程序框架唯一手段) 1个tab或者4个空格 (2)注释:开发者加入的说明信息,不被执行.一个代码块一个注释. # 单行注释(一 ...
- springclound
https://blog.csdn.net/w893932747/article/details/80896315 //这个有怎么创建client的 https://blog.csdn.net/m0_ ...
- 离线搭建Android Studio开发环境
https://blog.csdn.net/lilang_9920/article/details/81005345 自媒体可放心发,到时候再删就行了,to thi tha
- Vuex初级入门及简单案例
1.为什么要使用Vuex? (1)方便所有组件共享信息,方便不同组件共享信息. (2)某个组件需要修改状态和需求. 2.状态有哪些? (1)组件内部定义的data状态(通过组件内部修改) (2)组 ...
- spring cloud中feign的使用
我们在进行微服务项目的开发的时候,经常会遇到一个问题,比如A服务是一个针对用户的服务,里面有用户的增删改查的接口和方法,而现在我有一个针对产品的服务B服务中有一个查找用户的需求,这个时候我们可以在B服 ...
- 目前在segmentfault写博客
不是打广告.只是由于自己体验之类的关系,转移到segmentfault了,地址 https://segmentfault.com/u/linlinma,欢迎关注和交流
- 微信小程序:动画(Animation)
简单总结一下微信动画的实现及执行步骤. 一.实现方式 官方文档是这样说的:①创建一个动画实例 animation.②调用实例的方法来描述动画.③最后通过动画实例的 export 方法导出动画数据传递给 ...
- day03(变量,常量,输入输出,注释,基本数据类型,运算符)
一,复习 ''' 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识别的字 ...
- ES6类封装判断用户上下左右滑动事件!
/** * param 原生js方式实现判断用户的滑动方向 * 返回1 向上 * 返回2 向下 * 返回3 向左 * 返回4 向右 */ class juedgeSlide { constructor ...