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 ...
 
随机推荐
- Vue学习之路1-集成环境安装
			
1.前言 Vue 是一款友好的.多用途且高性能的javascript框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,它能够帮你创建可维护性和可测试性更强的代码库,Vue是渐进式的j ...
 - LeetCode算法题-Design HashMap(Java实现)
			
这是悦乐书的第299次更新,第318篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第167题(顺位题号是706).在不使用任何内置哈希表库的情况下设计HashMap.具体 ...
 - vue SSR : 原理(一)
			
前言: 由于vue 单页面对seo搜索引擎不支持,vue官网给了一个解决方案是ssr服务端渲染来解决seo这个问题,最近看了很多关于ssr的文章, 决定总结下: 参考博客:从0开始,搭建Vue2.0的 ...
 - day 15 模块、起别名、from导入
			
模块 '''模块:一系列功能的集合体定义模块:创建一个py文件就是一个模块,该py文件名就是模块名使用模块:在要使用模块的文件中,通过 import 模块名 来导入模块 ''''''import ...
 - offsetLeft、offsetX等
			
https://blog.csdn.net/w390058785/article/details/80461845
 - Jmeter名词注解
			
取值 ${ip}排除 .*\.js .*\.css .*\.png .*\.gif .*\.msp .*\.js 提取值 (.+?) (.*?)[() 括起来的部分就是需要提取的,对于你要提的内容需要 ...
 - odoo10.0在odoo12.0环境的基础上搭建环境
			
在前边的文章中,讲述了如何搭建12.0的环境,现由业务的需要需要在此基础上搭建基于python2.7的10.0版本. 第一步,安装python2.7 sudo apt- 第二步,安装python-de ...
 - 访问网站出现 HTTP ERROR 500 该网页无法正常运作
			
项目在本地环境配置好后访问出现如下图所示: 经过查看php日志文件发现问题在于数据库连接错误,如下图: 修改成本地的数据库用户名和密码,重启服务器即可正常访问.
 - 排序算法(sorting)
			
学习到的排序算法的总结,包括对COMP20003中排序部分进行总结,部分图片来自COMP20003 有部分内容来自http://www.cnblogs.com/eniac12/p/5329396.ht ...
 - 软件工程(GZSD2015) 第二次作业文档模板
			
题目: (此处列出题目) 需求分析: 基本功能 基本功能点1 基本功能点2 ... 扩展功能(可选) 高级功能(可选) 设计 设计点1 设计点2 ... 代码实现 // code here 程序截图 ...