left值变为0也停不了,请大佬帮忙

来源:2-1 JS速度动画

qq_精慕门6106023

2019-07-26 10:41

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#div1{

width: 200px;

height: 200px;

background-color: red;

position: relative;

top: 0;

left: -200px;

}

#div1 span{

width: 20px;

height: 50px;

background-color: blue;

position: absolute;

left: 200px;

top: 75px;

}

</style>

<script>

window.onload=function(){

var odiv=document.getElementById('div1');

odiv.onmouseover=function(){

startmove();

}

}

var timer=null;

function startmove(){

var odiv=document.getElementById('div1');


timer=setInterval(function(){

if(odiv.offsetLeft==0)

{

clearInterval(timer);

}

else 

{odiv.style.left=odiv.offsetLeft+1+'px';}

},30)

}

</script>

</head>

<body>

<div id="div1">

<span id="分享">

分享

</span>


</div>

</body>

</html>


写回答 关注

2回答

  • qq_慕雪6274093
    2020-07-01 19:41:11

    因为你的样式里面没有设置外间距,所以判断的结果不可能等于0,

    你要么把判断条件改成>=0;

    要么在头部样式(style)里面添加

    *{

    margin:0;

    padding:0;

    }

  • shirleykk97
    2019-07-28 21:57:17

    加上

    *{

    margin: 0;

    padding: 0;

    }

    就会停下来了

    shirle... 回复qq_安宁_...

    好像是网页本身有一点的默认样式,所以要把它消除了先

    2019-07-30 20:13:39

    共 2 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题