动画效果如何实现
那么好,这次我们要讲解的就是利用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>
