移动端的惯性运动，最早来自 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. 新树莓派系统安装ROS记录

    树莓派系统更新了,作为版本控的我怎么能忍住不更新系统,为了提高系统的速度,买了张170M的告诉sd卡,我要说的是,这个高速SD卡的钱花的最值得了,千万不要觉得树莓派都买了4,还要什么高速SD卡(自行车 ...

  2. StringBuffer 拼写串

    StringBuffer ssBuffer=new StringBuffer(); for (int i = 0; i < lista.size(); i++) { ssBuffer=ssBuf ...

  3. 线上bug或故障界定及填写规范

    [线上故障与线上Bug界定] 一.线上故障: 1.  故障参照公司规范稍做调整: a)         1级故障:资讯首页或主App首页无法打开:多条业务线同时不可用:超过15分钟: b)       ...

  4. java 架构师思维导图

    java 基础 . 理解IO.多线程.集合等基础框架.对JVM原理有一定了解. spring  spring boot  ibatis   structs开源框架了解. 熟悉分布式系统设计和应用. 小 ...

  5. pwn学习日记Day22 《程序员的自我修养》读书笔记

    知识杂项 软连接 命令: ln -s 原文件 目标文件 特征: 1.相当于windows的快捷方式 2.只是一个符号连接,所以软连接文件大小都很小 3.当运行软连接的时候,会根据连接指向找到真正的文件 ...

  6. count(1) 与 count(*) 比较

    1.  count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和count(*)的效 ...

  7. Visual Studio Team Systems

    https://www.cnblogs.com/33568639/archive/2008/12/29/1364222.html https://baike.sogou.com/v7818386.ht ...

  8. 07-08 Flutter仿京东商城项目 商品分类页面布局：Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...

  9. mysql主从数据一致性校验和修复

    1. 安装 yum install -y perl-IO-Socket-SSL.noarch perl-Digest-MD5 yum -y install http://www.percona.com ...

  10. IOS-App 运行installation failed原因及解决方法

    解决方法如下: Bundle Identifier不能为空