您的位置：首页 > Web前端 > JavaScript

js实现简单的动画（4个按钮控制图片上下左右移动）

2017-04-19 18:11 1051 查看

第一种写法，比较原始，没有精简的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小圆上下左右移动</title>
<style>
*{
margin: 0;
padding: 0;
}

body{
width: 1380px;
height: 720px;
margin:  10px auto;
border: 1px solid #000;
position: relative;
}

#box{
width: 100px;
height: 100px;
border-radius: 50%;
background: #f00;
position: absolute;
}

.button{
position: absolute;
right: 20px;
bottom: 10px;
}

.button input{
width: 60px;
height: 30px;
line-height: 30px;
border: none ;
border-radius: 10px;
background: #f00;
margin-right: 10px;
text-align: center;
color: #fff;
font-weight: 700px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" style="left: 640px; top: 310px;"></div>
<div class="button">
<input type="button" value="上" >
<input type="button" value="下" >
<input type="button" value="左" >
<input type="button" value="右" >
</div>
</body>
<script>
var box=document.querySelector('#box');
var inputs=document.querySelectorAll('input');
var xSpeed=2; //x轴的速度
var ySpeed=2; //y轴的速度
var timer;

// top
inputs[0].onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
ySpeed=-2;
xSpeed=0;
var y=parseInt(box.style.top)+ySpeed;
box.style.top=y+'px';
if(y<=0) clearInterval(timer);
},1000/60)
};

// bottom
inputs[1].onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
ySpeed=2;
xSpeed=0;
var y=parseInt(box.style.top)+ySpeed;
box.style.top=y+'px';
if(y>=620) clearInterval(timer);
},1000/60)
};

// left
inputs[2].onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
xSpeed=-2;
ySpeed=0;
var x=parseInt(box.style.left)+xSpeed;
box.style.left=x+'px';
if(x<=0) clearInterval(timer);
},1000/60)
};

//right
inputs[3].onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
xSpeed=2;
ySpeed=0;
var x=parseInt(box.style.left)+xSpeed;
box.style.left=x+'px';
if(x>=1280) clearInterval(timer);
},1000/60)
};
</script>
</html>

对javascript精简的代码

<script>
var inputs=document.querySelectorAll("input");
var box=document.querySelector(".box");
timer=null;
input[0].onclick=function(){
active("top",-2);
};

input[1].onclick=function(){
active("top",2);
};
input[2].onclick=function(){
active("left",-2);
};
input[3].onclick=function(){
active("left",2);
};

function active(sx,speed){
clearInterval(timer);
var nub=parseInt(box.style[sx]);
timer=setInterval(function(){
nub+=speed;
oBox.style[sx]=nub+"px";
},1000/60);
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航