JS运动基础(三) 弹性运动
加减速运动
速度不断增加或减少
速度减小到负值,会向反方向运动
弹性运动
在目标点左边,加速;在目标点右边,减速
根据距离,计算加速度
带摩擦力的弹性运动
弹性运动+摩擦力
弹性:
速度 += (目标点 - 当前值)/系数; //6 , 7 , 8
速度 *= 摩擦系数; // 0.7 0.75
终止条件
距离足够近 并且 速度足够小
缓冲:
var 速度 = (目标点 - 当前值)/系数;
速度取整
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0;}
#bg{ width:1px; height:500px; background:black; position:absolute; left:500px; top:0;}
</style>
<script> //摩擦力 : F = fM window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1'); var timer = null;
var iSpeed = 0; oInput.onclick = function(){
startMove();
}; function startMove(){
clearInterval(timer);
timer = setInterval(function(){ /*if( oDiv.offsetLeft < 500 ){
iSpeed += (500 - oDiv.offsetLeft)/50;
}
else{
iSpeed -= (oDiv.offsetLeft - 500)/50;
}*/ iSpeed += (500 - oDiv.offsetLeft)/6;
iSpeed *= 0.75; if( Math.abs(iSpeed)<=1 && Math.abs(500 - oDiv.offsetLeft)<=1 ){/*距离足够近 并且 速度足够小*/
clearInterval(timer);
oDiv.style.left = '500px';
iSpeed = 0;
}
else{
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
} document.title = oDiv.style.left + ',' + iSpeed; },30);
} };
</script>
</head> <body>
<input type="button" value="开始运动" id="input1">
<div id="div1"></div>
<div id="bg"></div>
</body>
</html>
JS运动基础(三) 弹性运动的更多相关文章
- js基础之弹性运动(四)
一.滑动菜单.图片 var iSpeed=0;var left=0;function startMove(obj,iTarg){ clearInterval(obj.timer);//记得先关定时器 ...
- js运动基础2(运动的封装)
简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...
- JS运动---运动基础(缓冲运动)
(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...
- JS运动基础(四) 碰撞运动
碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- [Js]弹性运动
描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...
- Javascript 运动基础 01
JS运动基础 运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动 速度不变 <s ...
- js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- python协程与异步I/O
协程 首先要明确,线程和进程都是系统帮咱们开辟的,不管是thread还是process他内部都是调用的系统的API,而对于协程来说它和系统毫无关系; 协程不同于线程的是,线程是抢占式的调度,而协程是协 ...
- 2016年12月18日 星期日 --出埃及记 Exodus 21:13
2016年12月18日 星期日 --出埃及记 Exodus 21:13 However, if he does not do it intentionally, but God lets it hap ...
- 使用ajax登录格式
登录页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- iotop命令
简介: iotop – simple top-like I/O monitor iotop是一个用来监视磁盘I/O使用状况的 top 类工具,可监测到哪一个程序使用的磁盘IO的信息(requires ...
- jQuery 添加元素
jQuery 添加元素 1.append 在被选元素的结尾插入内容 $(document).ready(function(){ $("button").click(function ...
- Oracle介绍(初学者必须知道的)
1.为什么学习数据库?(两个概念) 数据库的概念: 数据库是按照数据结构组织,存储和管理数据的仓库. 数据库,简单来说是本身可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据进行新增. ...
- jquery之remove(),detach()方法详解
一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove ...
- 2.4G高频PCB天线设计
2.4G高频PCB天线设计 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考链接: http://bbs.rfeda.cn/read-htm-t ...
- iOS开发 百度坐标点的计算
BMKMapPoint point1 = BMKMapPointForCoordinate(_userGps); BMKMapPoint point2 = BMKMapPointForCoordina ...
- JQuery text()、html() 以及 val()
获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...