老师这里设置了定时器为啥没有抖动的效果呢？
来源：2-3 存储实现打怪小案例
慕函数4234673
2020-03-29 12:04:52
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.img{
width: 200px;
height: 200px;
position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left: -100px;
}
.box{
width: 400px;
height: 30px;
position: absolute;
top:10%;
left:50%;
margin-left: -200px;
border: 1px solid black;
}
.xue{
background: red;
width: 400px;
height: 100%;
transform: .7s;
}
</style>
</head>
<body>
<div class="box">
<div class="xue"></div>
</div>
<img src="1.jpeg" class="img">
</body>
<script type="text/javascript">
var timer=null,num=0
onclick=function(){
clearInterval(timer)
timer=setInterval(function(){
num++
if(num==6){
clearInterval(timer)
return
}
document.body.style.left = Math.random() * -20 + 10 + 'px';
document.body.style.top = Math.random() * -20 + 10 + 'px';
},30)
}
</script>
</html>
1回答
-
好帮手慕糖
2020-03-29
同学你好，left与top是要结合定位使用，建议：可以给body设置相对定位，例：
设置之后，图片的文字还需要设置下。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题