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>