有个缝隙怎么办

来源:3-1 JS缓冲动画

MY裴秀智4043005

2016-12-03 17:41

有个缝隙,谁知道怎么搞的?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

body,div,span{

margin: 0;

padding: 0;

}

#div1{

width: 200px;

height: 200px;

background: red;

position: relative;

left: -200px;

top: 0;

}

#div1 span{

width: 20px;

height: 50px;

background: blue;

position: absolute;

left: 200px;

top: 75px;

}

</style>

<script>

window.onload = function(){

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

oDiv.onmouseover  = function(){

startMove(0);

}

oDiv.onmouseout =function(){

startMove(-200);

}

}

var timer = null;

function startMove(iTarget){

clearInterval(timer);

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

timer =setInterval(function(){

var speed =(iTarget-oDiv.offsetLeft)/20;

if(oDiv.offsetLeft==iTarget){

clearInterval(timer);

}

else{

oDiv.style.left = oDiv.offsetLeft+speed+'px';

      

      }

},30)

}


</script>

</head>

<body>

<div id="div1"><span id="share">分享</span></div>

</body>

</html>


写回答 关注

1回答

  • MY裴秀智4043005
    2016-12-03 17:43:51

    我自己解决了

JS动画效果

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

113920 学习 · 1500 问题

查看课程

相似问题