小球移动js代码

最新推荐文章于 2024-03-18 09:04:10 发布

时苏

最新推荐文章于 2024-03-18 09:04:10 发布

阅读量826

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_34616343/article/details/53434792

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tiao</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
height: 30px;
margin: 100px auto;
position: relative;
}
#q{
width:30px;
height: 30px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
background: red;
}
#t{
width: 500px;
height: 10px;
background: black;
position: absolute;
border-radius: 20%;
top: 10px;
left: 0px;
}
</style>
</head>
<body>
<div id="box">
<div id="t"></div>
<div id="q"></div>
</div>
</body>
<script type="text/javascript">
var q=document.getElementById('q');
var box=document.getElementById('box');
var lf=0;
var x=true;
var boxW=box.clientWidth-q.offsetWidth;
setInterval(function(){
if(x==true){
lf++;
if(lf>=boxW){
x=false;
};
q.style.left=lf+'px';
}else{
lf--;
if(lf<=0){
x=true;
};
q.style.left=lf+'px';
};
},1)

</script>

</html>