移动端的惯性运动，最早来自 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. DockerFile体系结构（保留字指令）

    1.FROM --基础镜像,当前新镜像是基于那个镜像的 2.MAINTAINER --镜像维护者的姓名和邮箱地址 3.RUN --容器构建时需要运行的指令 4.EXPOSE --当前容器对外暴露出的端 ...

  2. CentOS 安装 MySQL PDO 扩展

    yum install php-pdo_mysql sudo service php-fpm restart

  3. 网络时间协议 (SNTP)

    sntp是简单网络时间协议(Simple Network Protocol)的客户端,可以用来查询或修正NTP服务器的时间和本地的时差. sntp可以以非交互模式运行或运行一个计划任务的脚本. snt ...

  4. 高性能高可用的微服务框架TarsGo的腾讯实践

    conference/2.3 高性能高可用的微服务框架TarsGo的腾讯实践 - 陈明杰.pdf at master · gopherchina/conferencehttps://github.co ...

  5. python 调用父类方法， 重写父类构造方法， 不显式调用，会报错

    子类不显式调用父类的构造方法,而父类构造函数初始化了一些属性,就会出现问题 如果子类和父类都有构造函数,子类其实是重写了父类的构造函数,如果不显式调用父类构造函数,父类的构造函数就不会被执行,导致子类 ...

  6. 关于hexo-abbrlink链接undefined

    关于hexo-abbrlink hexo-abbrlink是一个hexo博客链接永久化的解决方案 支持使用不同的算法和进制对文章链接进行转换 算法 进制 生成链接 crc16 hex https:// ...

  7. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_11.RabbitMQ研究-工作模式-路由工作模式测试

    先常见生产者 复制02的代码 先改一下交换机的名称 还需要制定routingKey.因为是两个消息 所以指定了两个routingKey 这里修改为当前指定的交换机名称 交换机和队列在绑定的时候指定我们 ...

  8. 读写Session

    读写Session Session是保存在服务端的字典 Session与Cookie有些类似,都是通过字典管理key-value对,只不过Cookie是保存在客户端的字典,而Session是保存在服务 ...

  9. 使用 mencoder 制作幻灯片

    首先安装相关依赖: sudo apt-get install mencoder sudo apt-get install imagemagick 编辑 test.sh 脚本如下: #!/bin/bas ...

  10. react 组件创建

    /** * 数据屏蔽 * Created by 2016-12-02. */ import React, {Component} from 'react'; export default class ...