动画效果如何实现
那么好,这次我们要讲解的就是利用dom事件和定时方法来实现一个简单的动画效果.
实现这个效果,一共分为三个步骤:
1.实现效果
2.实现点击切换位置
3.实现动画效果
样式
两个div,一个父div,一个子div,用position+relative+absolute定位实现左上角效果,两个按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #container { width: 300px; height: 300px; background-color: blue; position: relative; } #content { width: 50px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="container"> <div id="content"></div> </div> <button onclick="dianji()">setTimeout</button> <button onclick="jidian()">setInterval</button> </body> </html>
dom切换位置
切换位置本质就是切换position的样式,用到的方法就是
document.getElementById("id").style.left='content'
<style> #container { width: 300px; height: 300px; background-color: blue; position: relative; } #content { width: 50px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; } </style> <body> <div id="container"> <div id="content"></div> </div> <button onclick="dianji()">setTimeout</button> <button onclick="jidian()">setInterval</button> <script> function dianji(){ document.getElementById('content').style.left='250px' document.getElementById('content').style.top='250px' } </script> </body>
当点击的时候,我们通过dom文档对象的id的style来改变具体的样式,这里我们改的是absolute中的left和top.
定时器实现动态移动位置
setTimeout实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #container { width: 300px; height: 300px; background-color: blue; position: relative; } #content { width: 50px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="container"> <div id="content"></div> </div> <button onclick="dianji()">setTimeout</button> <button onclick="jidian()">setInterval</button> <script> let temp=0 function dianji(){ temp+=1; setTimeout(()=>{ if(temp==1){ document.getElementById('content').style.left=0 document.getElementById('content').style.top=0 } if(temp<=250){ document.getElementById('content').style.left=temp+'px' document.getElementById('content').style.top=temp+'px' dianji() }else{ temp=0; clearTimeout(temp) } },5) } </script> </body> </html>
setInterval定时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #container { width: 300px; height: 300px; background-color: blue; position: relative; } #content { width: 50px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="container"> <div id="content"></div> </div> <button onclick="dianji()">setTimeout</button> <button onclick="jidian()">setInterval</button> <script> let temp = 0 function dianji() { temp += 1; setTimeout(() => { if (temp <= 250) { document.getElementById('content').style.left = temp + 'px' document.getElementById('content').style.top = temp + 'px' dianji() } else { temp = 0; clearTimeout(temp) } }, 5) } function jidian() { let id = setInterval(frame, 5) function frame() { temp += 1; if (temp <= 250) { document.getElementById('content').style.left = temp + 'px' document.getElementById('content').style.top = temp + 'px' } else { temp = 0 clearInterval(id) } } } </script> </body> </html>
