javascript 的惯性运动
移动端的惯性运动，最早来自 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 的惯性运动的更多相关文章
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- javascript多物体运动案例：多物体淡入淡出
javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...
- Javascript的动态运动（1）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理
我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...
- JavaScript实例：运动的小球
本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- javascript学习之运动框架
模仿新浪博客首页的,最新评论: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g ...
- JavaScript中的运动数学函数（持续更新）
经常需要实现JS的动画效果,就会用到如下的一些数学的东西. 二次方运动,从0开始加速: var f=function(t,orgvalue,changevalue,runtime){ var t=t/ ...
随机推荐
- Leetcode题目322.零钱兑换（动态规划-中等）
题目描述: 给定不同面额的硬币 coins 和一个总金额 amount.编写一个函数来计算可以凑成总金额所需的最少的硬币个数.如果没有任何一种硬币组合能组成总金额,返回 -1. 示例 1: 输入: c ...
- 访问项目时报错org.apache.jasper.JasperException: java.lang.NullPointerException
错误信息:org.apache.jasper.JasperException: java.lang.NullPointerException 原因:项目依赖的jar包和tomcat容器的依赖jar包有 ...
- 笔记四（Competitor Analysis Test小结）
1.关机后启动电脑,测试BIOS的POST time 2.进入睡眠模式后,按任意键,通过Windows logs查看bios的init时间 3.进入BIOS setup的快捷键,一般为F2 4.进入B ...
- Ubuntu18.04 桌面系统的个人吐槽（主要是终端）
装了Ubuntu18.04,桌面换风格了,使用中最大的感觉是终端切换非常反人类,可能是我还没有摸清门路.原先习惯用Alt+Tab快捷键切不同终端以及不同窗口的,现在Alt+Tab时多个终端会归成一个图 ...
- 快速上手系列-C语言之指针篇(一)
快速上手系列-C语言之指针篇(一) 浊酒敬风尘 发布时间:18-06-2108:29 指针的灵活运用使得c语言更加强大,指针是C语言中十分重要的部分,可以说指针是C语言的灵魂.当然指针不是万能的,但没 ...
- DELPHI安卓定位权限申请
DELPHI安卓定位权限申请 安卓8及以后版本的权限分为静态和动态申请2部分,而之前的安卓版本只需要静态申请权限. 1)静态申请定位权限: 2)动态申请定位权限: uses System.Permis ...
- arcgis的arcpy写入几何怎么创建一个空心面要素并读取几何和属性信息，根本不够管
转载请注明作者(独孤尚良dugushangliang)出处:https://blog.csdn.net/dugushangliang/article/details/83861447 这个我是没找到这 ...
- Thymeleaf th:include、th:replace引用
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ...
- MySQLUNION_连接两个以上的 SELECT 语句的结果组合到一个结果集合
MySQL UNION 操作符用于连接两个以上的 SELECT 语句的结果组合到一个结果集合中.多个 SELECT 语句会删除重复的数据. 描述 MySQL UNION 操作符用于连接两个以上的 SE ...
- python 获取昨天的日期
from datetime import timedelta, datetime yesterday = datetime.today()+timedelta(-1) yesterday_format ...