移动端的惯性运动，最早来自 ios 的专利。用于手指滑动，离开屏幕之后，屏幕内容继续滚动。更有动态感。

这里，以 pc 端，鼠标横向（沿x轴） 拖拽的，惯性计算。移动端同理

具体代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>惯性运动</title>

	<style type="text/css">

		#box{

			background: pink;

			width: 100px;

			height: 100px;

			position: absolute;

			top: 100px;

			left: 100px;

		}

	</style>

</head>

<body>

	<div id="box"></div>

</body>

<script type="text/javascript">

	var $box = document.getElementById("box");

	var isDown = false; //是否按下鼠标

	var inertance = 1.2; //惯性系数,越大,惯性越不明显,不能小于0

	var fv =  0; //滑动的力度

	var timer = null;

	$box.onmousedown = function(e){

		clearTimeout(timer);//清除定时器

		fv = 0;

		this._start = e.clientX; //鼠标按下的位置

		isDown = true;//鼠标是否有按下，主要防止用户是从容器外开始滑动的

	}

	$box.onmousemove = function(e){

		if(isDown){

			var miss = e.clientX - this._start;

			moveMiss(miss)

			this._start = e.clientX;

			fv = miss;

		}

	}

	function moveMiss(miss){

		$box.style.left = miss + $box.offsetLeft + "px";

	}

	window.onmouseup = function(e){

		if(isDown){

			isDown = false;

			var me = this;

			var friction = ((fv >> 31) * 2 + 1) * inertance;//根据力度套用公式计算出惯性大小,公式要记住

			var num = Math.abs(friction);

			timer = setInterval(function(){

				 fv -= friction;//力度按 惯性的大小递减

				 moveMiss(fv);

				 if(Math.abs(fv) < num){  //如果力度减小到小于1了,结束,或者边界弹回

					 clearInterval(timer);

					 return ;

				 }

			},20);

		}

	}

</script>

</html>

　　

javascript 的惯性运动的更多相关文章

  1. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  2. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  3. Javascript的动态运动（1）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  5. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  6. JavaScript实例：运动的小球

    本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...

  7. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  8. javascript学习之运动框架

    模仿新浪博客首页的,最新评论: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g ...

  9. JavaScript中的运动数学函数（持续更新）

    经常需要实现JS的动画效果,就会用到如下的一些数学的东西. 二次方运动,从0开始加速: var f=function(t,orgvalue,changevalue,runtime){ var t=t/ ...

随机推荐

  1. php中strlen()和mb_strlen()函数

    php中strlen()和mb_strlen()函数 一.总结 一句话总结: mb_strlen()函数 的作用是 通过不同的编码计算字符串的长度: 比如 echo mb_strlen('中文a字1符 ...

  2. Qt pro工程文件介绍

    app - 建立一个应用程序的makefile.这是默认值,所以如果模板没有被指定,这个将被使用. lib - 建立一个库的makefile. vcapp - 建立一个应用程序的Visual Stud ...

  3. Default Keyboard Shortcut Schemes

    Default Keyboard Shortcut Schemes All ReSharper actions can be invoked with keyboard shortcuts. Most ...

  4. HearthBuddy炉石兄弟 Method 'Entity.GetRace' not found.

    解决方案 namespace Triton.Game.Mapping{// Token: 0x020004A4 RID: 1188[Attribute38("Entity")]pu ...

  5. centos7 - nginx配置安装phpmyadmin

    原文  https://www.linuxidc.com/Linux/2017-10/147556.htm 使用Nginx搭建phpMyAdmin   Nginx有什么用? Nginx可读作Engin ...

  6. OpenCV学习笔记(2)——如何用OpenCV处理视频

    如何用OpenCV处理视频 读取视频文件,显示视频,保存视频文件 从摄像头获取并显示视频 1.用摄像头捕获视频 为了获取视频,需要创建一个VideoCapature对象.其参数可以是设备的索引号,也可 ...

  7. 常见的RSA套路脚本

    工具 rsatool https://github.com/ius/rsatool factordb(分解大素数) http://www.factordb.com python-PyCrypto库 O ...

  8. ME21N屏幕格式配置路径

    物料管理->采购->采购订单->定义屏幕层的屏幕格式

  9. WePay-T

    (需先申请微信支付商户账号) 在微信支付中绑定appid,公众号和小程序都一样 微信支付中如下: 微信公众平台如下(公众号与小程序一样): 微擎配置微信支付 appid.appsecret为公众号中对 ...

  10. EKFiddle：基于Fiddler研究恶意流量的框架

    转载自FreeBuf.COM EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件.恶意软件和恶意流量的框架. 安装 下载并安装最新版本的Fiddler http ...