移动端的惯性运动，最早来自 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. JQuery 行内编辑(即点即改)

    行内编辑 下面是详细的代码: <style> .dian { cursor: pointer; } </style> //这个让鼠标 移动到 span上 的时候 是一个小手 & ...

  2. PHP 之快递100接口封装

    <?php /** * Created by PhpStorm. * User: Yang * Date: 2019/8/23 * Time: 10:38 */ class Kuaidi_Que ...

  3. Eclipse生成EXE文件（可视化Login/读取文件）

    Java Swing实现文件的简单读取 WindowBuilder的安装与使用 如何采用java设置一个登陆界面 package jp.services.slink2.batch.so2or; imp ...

  4. BOM相关方法及属性

    browser objec tmodel浏览器对象模型 BOM里面的方法大多在window对象底下,window代表窗口,也就是说,在BOM里面大多调用window下面的东西. 1.open方法是wi ...

  5. ubuntu 切换默认python版本

    现在的python项目都是基于python3的了,再用ubuntu的时候默认的版本是py2的,所以想切换到py3上: 打开终端: sudo update-alternatives --install ...

  6. kotlin创建类的实例

    Java 中使用new关键字,但是在kotlin中调用函数和创建类的实例直接省略new 比如 new myClass()变成类myClass()

  7. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_17-页面静态化-模板管理-GridFS研究-存文件

    将模板信息保存在cms_template里面 存储在fs.chunks这个集合中.这个集合里面存的是分块文件. fs.files存的是文件的基本信息 chunks存的是块信息 创建测试文件 在cms的 ...

  8. js模块化编程之彻底弄懂CommonJS和AMD/CMD

    转自 http://www.cnblogs.com/chenguangliang/p/5856701.html

  9. linux操作备份

    ---------------------------------------------------------------------------------------------------- ...

  10. 一个可以让vsftpd启动系统用户登陆ftp的例子

    编辑 /etc/vsftpd.conf 如下: listen=YES anonymous_enable=NO local_enable=YES check_shell=NO write_enable= ...