JS惯性滚动，加速滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS惯性滚动，加速滚动</title>
<style>
*{ margin:100; padding:0; list-style:none; font-family: "微软雅黑" }
#div_bar{width:200px; background:limegreen; height:40px;position:absolute;left:0;top:0;}
.box{width:10px;height:10px;background:green; position:absolute;left:0;top:0;}#div_msg{margin-left:210px;}</style><script>//滚动事件数组
let g_arr_wheel = [];window.onmousewheel = function(){var oDiv=document.getElementById('div_bar');let t_dir = event.wheelDeltaY > 0 ? 1 : -1; let t_wheel_num = g_arr_wheel.length;let t_velocity = 0;//首先删除间隔1000ms以上的 if(t_wheel_num > 0){let t_old_dir = g_arr_wheel[t_wheel_num-1].wheelDeltaY > 0 ? 1 : -1;if(t_old_dir != t_dir){//方向变了console.log('方向变了-----');g_arr_wheel = [];}else{for(let xe = t_wheel_num-1 ; xe>=0; xe--){let t_cur_wheel = g_arr_wheel[xe]; let t_time = event.timeStamp - t_cur_wheel.timeStamp;if(t_time > 1000){g_arr_wheel = g_arr_wheel.slice(xe+1);break;}}}}g_arr_wheel.push(event);t_wheel_num = g_arr_wheel.length;t_velocity = 0;for(let i=0; i<t_wheel_num; i++){let t_delta_y = g_arr_wheel[i].wheelDeltaY; t_delta_y = Math.abs(t_delta_y) / 120; t_velocity += t_delta_y; }t_velocity = Math.pow(t_velocity, 1.6);t_velocity = t_dir * t_velocity * 3; t_velocity = t_velocity.toFixed(2);let speedX = 0;let speedY = t_velocity;function do_move(obj,speedX,speedY){clearInterval(obj.timer);obj.timer=setInterval(function(){speedX*=0.95; //摩擦系数speedY*=0.95; //摩擦系数obj.style.left=obj.offsetLeft+speedX+'px';if(Math.abs(speedX)<1) speedX=0;if(Math.abs(speedY)<1) speedY=0;if(speedX==0 && speedY==0){console.log('停止定时器---');clearInterval(obj.timer); }let t_top = obj.offsetTop+speedY;if(t_top < 0){t_top = 0;speedY = 0;}obj.style.top = t_top+'px';var div_msg = document.getElementById('div_msg');let speedYstr = speedY.toFixed(0);t_top = t_top.toFixed(0);div_msg.innerHTML = '速度：'+speedYstr+' <br>距离：'+t_top;},30); }do_move(oDiv,speedX,speedY);}</script>
</head>
<body style='overflow:hidden'><div id='div_msg'>滚一下试试</div><div id="div_bar"> </div>
</body>
</html>JS惯性滚动，加速滚动相关推荐
- html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件，实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
- php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章 先看一张效果图 思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- 超链接js点击后页面向上滚动问题解决
超链接js点击后页面向上滚动问题解决 <a href="#" οnclick="fun();return false;"></a>
- JS实现图片循环滚动
之前在前端的时候有遇到这样一个问题,实现 JS 图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器 ...
- 分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- css + js实现简单无缝滚动字幕
css + js实现无缝滚动字幕 利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动 目录 css js实现无缝滚动字幕 实现思路 html 代码 css 代码 js 代 ...
- js控制div内部滚动内容横向滑动位置
js控制div内部滚动内容横向滑动位置 使用 js控制div内部的滚动内容横向滑动,主要应用在移动端,项目是基于angularJS,所以带有angular的点击方法ng-click,可以用原生js替换 ...
最新文章
- java学习：对synchronized的测试
- Gartner预测2019年十大「数据和分析技术」趋势：增强型分析成为重要卖点
- 算法导论--python--插入排序
- 2星|《深度模仿》：陷入锤子模式，案例太少，洞察力欠缺
- VSC为_锐志 VSC 警告灯间歇点亮
- django 中的render和render_to_response()和locals()
- c#如何跨线程调用窗体控件
- bootstrap拖动div_JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
- 容器中运行Fabric区块链网络
- Sphinx安装与基本设置
- mac 安装mysql
- c语言运算程序示例,C语言算术运算示例程序
- GNSS北斗高精度定位终端_一体化接收机
- win7下LInux虚拟机搭建
- GBase8d产品admin目录下的文件及文件夹说明
- 迭代器(lterator)
- Android 自定义控件之圆形页面指示器CirclePageIndicator带划动效果
- C# Sharp问题解决：System.FormatException 输入字符串的格式不正确
- pytorch复现NCF
- 3D相机测距原理总结