<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.box{
position:absolute;
top:40px;
width: 100px;
height: 100px;
background-color:red;
}
.line{
position:absolute;
left:700px;
top:0;
width: 5px;
height: 200px;
background-color:#000;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="button" name="" value="開始">
<div class="line"></div>
<input type="button" name="" value="回到原點">
<script>
var btn=document.getElementsByTagName("input")[0];
var box=document.getElementsByClassName("box")[0];
var back=document.getElementsByTagName("input")[1];
window.onload=function(){
var timer=null;
btn.onclick=function(){
startMove(box,700);
}
//緩衝運動部分
function startMove(elem,target){
clearTimeout(timer);
timer=setInterval(function(){
var speed=(target-elem.offsetLeft)/10;
speed=speed>0?Math.ceil((target-elem.offsetLeft)/10):Math.floor((target-elem.offsetLeft)/10);
if(target==elem.offsetLeft){
clearTimeout(timer);
}else{
elem.style.left=elem.offsetLeft+speed+"px";
}
},100)
}
back.onclick=function(){
startMove(box,0);
}
//回到原點部分
function backMove(elem,target){
clearTimeout(timer);
timer=setInterval(function(){
var speed=Math.floor((target-elem.offsetLeft)/10);
if(target==elem.offsetLeft){
clearTimeout(timer);
}else{
elem.style.left=elem.offsetLeft+speed+"px";
}
},100)
}
}
</script>
</body>
</html>
JS高級之簡單緩衝運動並回到原點
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章