共计 4718 个字符，预计需要花费 12 分钟才能阅读完成。
day15 DOM 高级
1. 静止原理
1）静止原理
JavaScript 实现静止的原理，就是通过定时器一直扭转元素的地位，直至达到指标点后进行静止。通常，要让元素动起来，咱们会通过扭转元素的 left 和 top 值来扭转元素的绝对地位。
2）办法
-
- 静止的物体应用相对定位
-
- 通过扭转定位物体的属性（left、right、top、bottom）值来使物体挪动。例如向右或左挪动能够应用 offsetLeft（offsetRight）来管制左右挪动
3) 步骤：
-
- 开始静止前，先革除已有定时器（因为：如果间断点击按钮，物体会静止越来越快, 造成静止凌乱）
-
- 开启定时器，计算速度
-
- 把静止和进行隔开（if/else), 判断进行条件，执行静止
2. 匀速运动
问题：频繁点击按钮，因为每次点击 都要重新启动定时器，相当于减速
解决： 每次启动定时器时, 将上一个定时器革除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 200px;
left: 100px;
}
#box1{
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
top: 400px;
left: 200px;
}
</style>
<body>
<button type="button"> 启动 </button>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script type="text/javascript">
// 点击启动,div 块匀速运动
let oBtn = document.querySelector('button');
let oBox = document.querySelector('#box');
let oBox1 = document.querySelector('#box1');
let time = null;
function startMove(obj){
// 留神: 每次只能关上一个定时器, 否则再次点击会使得成果是减速成果
clearInterval(time);
time = setInterval(function(){
obj.style.left = obj.offsetLeft + 5 + 'px';
// 使得静止进行的条件
if(obj.offsetLeft > 600){
obj.style.left = '600px';// 留神边界问题
clearInterval(time);
}
},50); //50ms 相当于一秒是 20 帧
}
oBtn.onclick = function(){
// 调用封装的匀速运动的函数
startMove(oBox1);
}
</script>3. 往返静止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 200px;
left: 100px;
}
</style>
<body>
<button type="button"><--</button>
<button type="button">--></button>
<div id="box">
</div>
</body>
</html>
<script type="text/javascript">
let oBtns = document.querySelectorAll('button');
let oBox = document.querySelector('#box');
let time= null;
// 参数是静止的元素和指标地位
function startMove(obj, target){clearInterval(time);
time = setInterval(function(){
let speed = obj.offsetLeft >= target ? -5:5;
obj.style.left = obj.offsetLeft + speed + 'px';
// 静止进行的条件
if(obj.offsetLeft <=0 || obj.offsetLeft>=1000){clearInterval(time);
}
},50);
}
oBtns[0].onclick = function(){startMove(oBox, 0);
}
oBtns[1].onclick = function(){startMove(oBox, 1000);
}
</script>4. 匀速通明静止
留神两点：
非行内的读 getComputedStyle(Dom 对象,false)[‘ 属性名 ’] 返回字符串；
Number(); 字符串转数字；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 200px;
left: 300px;
opacity: 0.5;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var oBox = document.querySelector('#box');
let time = null;
function startMove(obj,target){clearInterval(time);
time = setInterval(function(){// 非行内的读 getComputedStyle(Dom 对象,false)['属性名'] 返回字符串
let speed = getComputedStyle(obj,false)['opacity']<target?0.01:-0.01;
oBox.style.opacity = Number(getComputedStyle(obj,false)['opacity']) + speed;
},50);
}
oBox.onmouseover = function(){startMove(oBox,1);
}
oBox.onmouseout = function(){startMove(oBox,0.1);
}
</script>5. 缓冲静止
如果挪动的像素小于半个像素，则会静止，看不到挪动。所以是要敞开定时器的。
原理：// 缓冲静止原理
let speed = (target-obj.offsetLeft)/ 系数; 系数是速度变化率，系数越大, 速度越慢
// 速度取整
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);// 外围算法 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: #ADFF2F;
position: absolute;
top: 200px;
left: 100px;
}
</style>
</head>
<body>
<button type="button"> 启动 </button>
<div id="box">
</div>
</body>
</html>
<script type="text/javascript">
// 原理：// 缓冲静止原理
// let speed = (target-obj.offsetLeft)/ 系数; 系数越大, 速度越慢
// speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);// 外围算法
let oBox = document.querySelector('#box');
let oBtn = document.querySelector('button');
let time = null;
function startMove(obj, target){clearInterval(time);
time = setInterval(function(){let speed = (target-obj.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.style.left = obj.offsetLeft + speed + 'px';
if(obj.offsetLeft == 500){clearInterval(time);
}
},50);
}
oBtn.onclick = function(){startMove(oBox, 500);
}
</script>6. 反弹静止
外围思路：当碰壁时将速度（位移）反向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box,#box1,#box2,#box3{
width: 50px;
height: 50px;
background-color: aqua;
position: absolute;
top: 100px;
left: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<button type="button"> 启动 </button>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
let oBtn = document.querySelector('button');
let oBox = document.querySelector('#box');
function startMove(obj){let [speedX,speedY] = [5,5];
setInterval(function(){
obj.style.left = obj.offsetLeft + speedX + 'px';
obj.style.top = obj.offsetTop + speedY + 'px';
// 碰壁的话将速度反向
// 碰壁的那一刻会抖动, 加滚动条, 所以减个 10
if(obj.offsetLeft<0 || obj.offsetLeft>innerWidth-obj.offsetWidth-10){speedX *= -1;}
if(obj.offsetTop<0 || obj.offsetTop>innerHeight-obj.offsetHeight-10){speedY *= -1;}
},50);
}
oBtn.onclick = function(){startMove(oBox);
}
</script>
正文完
发表至： javascript
2021-01-16
