移动端的惯性运动，最早来自 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. 【spring源码分析】IOC容器初始化——查漏补缺（二）

    前言:在[spring源码分析]IOC容器初始化(八)中多次提到了前置处理与后置处理,本篇文章针对此问题进行分析.Spring对前置处理或后置处理主要通过BeanPostProcessor进行实现. ...

  2. Ajax简单异步上传图片并回显

    前台代码 上传图片按钮 <a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</ ...

  3. 在阿里云上挂在/data脚本

    在阿里云上加好一块磁盘后,将他分区,挂在在/data,并且设置开机自动挂在/etc/fstab [root@ZHONG-LONG javascripts]# vim mount.sh #!/bin/b ...

  4. 如何丧心病狂的使用python爬虫读小说

    写在前边 其实一直想入门python很久了,慕课网啊,菜鸟教程啊python的基础的知识被我翻了很多遍了,但是一直没有什么实践.刚好,这两天被别人一直安利一本小说<我可能修的是假仙>,还在 ...

  5. 源码编译vi过程中进行配置时报“checking if compile and link flags for Python are sane... no: PYTHON DISABLED”怎么办?

    答: 需要安装python开发库(如果不安装这个库,那么在配置时执行./configure --enable-pythoninterp=yes将不会生效,以至于vi的python特性并没有被开启) 如 ...

  6. c++ new bad_alloc

    try { for (int i = 0; i<1000; i++) { test1 = new Test(); cout << i << " new dog ...

  7. Build Telemetry for Distributed Services之OpenCensus：C#

    OpenCensus Easily collect telemetry like metrics and distributed traces from your services OpenCensu ...

  8. Qt编写自定义控件32-等待进度条控件

    一.前言 在各种各样的执行任务界面,有时候需要比较多的时间,需要给出一个直观的等待进度条表示当前正在执行的进度,而不至于懵逼在那里,用户不会觉得程序死了还是干嘛了. 等待进度条有好几种办法,比如直接叫 ...

  9. Oracle查询序列和函数方法封装

    工具方法: @Autowired private JdbcTemplate businessTpmeJdbcTemplate; @SuppressWarnings("deprecation& ...

  10. Unity和Android交互学习

    这段时间学习Unity和Android互调,从基础开始. 网上的教程有很多,浏览了一圈教程,发现目前有两种方式:一种是直接把 .aar文件导入Unity/Plugins/Android文件夹,另一种是 ...