<!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>
09-15
162
162
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
