一、javascript的匀速运动
关于物体的javascript匀速运动要点分析：
1.物体关于运动的时候，我们要打开定时器
2.打开定时器的时候我们记得要在停止的时候关闭定时器，同时应该注意的是一开始加载的时候，我们也应该关闭定时器，避免多次重复的加载，导致的加速运动。
3.并且速度初始化为0
实施方法：
判断物体的偏移是否小于目标值（判断运动的速度）
小于 可以继续运动 大于向右运动
2。先判断什么地方停下来？
判断条件：物理的偏移量小于7就是不能超过速度的值时
直接让它对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript匀速运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById(‘btn1‘);
var oDiv = document.getElementById(‘div1‘);
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var timer = null;
function startMove(obj, iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var iSpeed = 0;
if(obj.offsetLeft < iTarget)
{
iSpeed = 7;
}
else
{
iSpeed = -7;
}
if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
{
clearInterval(timer);
obj.style.left = iTarget + ‘px‘;
}
else
{
obj.style.left = obj.offsetLeft + iSpeed + ‘px‘;
}
}, 30);
}
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<!--span为一条线-->
<span></span>
</body>
</html>
二、javascript变速运动
要点分析：
1.如何做到变加速运动？利用目标值与偏差值（obj.offsetLeft）的差去除以一个定值，因为偏差值（obj.offsetLeft）会随着时间的改变而改变，从而达到一个变速的目的
2.判断速度大于0 向上取整 小于0向下取整
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById(‘btn1‘);
var oDiv = document.getElementById(‘div1‘);
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var timer = null;
function startMove(obj, iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var iSpeed = (iTarget - obj.offsetLeft)/8;
iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iTarget==obj.offsetLeft){
clearInterval(timer);
}else{
obj.style.left = obj.offsetLeft + iSpeed + ‘px‘;
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="移动" />
<div id="div1"></div>
<span></span>
</body>
</html>
三、javascript的弹性运动
1.开始做一个减速运动
2.在减速运动中添加一个摩擦运动
//做一个加速度减缓的变加速欲动 加速度 iSpeed += (iTarget - obj.offsetLeft)/5; //控制速度的减缓量 摩擦力 iSpeed *= 0.7; //向左移动的距离 left += iSpeed;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById(‘btn1‘);
var oDiv = document.getElementById(‘div1‘);
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//做一个加速度减缓的变加速欲动 加速度
iSpeed += (iTarget - obj.offsetLeft)/5;
//控制速度的减缓量 摩擦力
iSpeed *= 0.7;
//向左移动的距离
left += iSpeed;
//速度小于1并且距离差小于1时停止并且将目标值赋予块
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget + ‘px‘;
}else{
obj.style.left = obj.offsetLeft + iSpeed + ‘px‘;
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>
时间： 2024-10-14 12:46:09