各位老师同学,帮我看看我的代码哪里出了问题可以吗,鼠标移入有反应,鼠标移出没反应?

来源:3-1 JS缓冲动画

我背后有个胖子

2016-10-17 22:18


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>速度动画</title>

<style type="text/css">

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;

  speed=speed>0?Math.ceil(speed):Math.floor(speed);

  if (oDiv.offsetLeft=iTarget){

     clearInterval(timer);

}else{oDiv.style.left=oDiv.offsetLeft+speed+"px";


},30)


}


</script>

</head>

<body>

<div id="div1">

<span>分享</span>

                  </div>

</body>

</html>


写回答 关注

1回答

  • Cancer_bin
    2016-10-18 09:41:37

     if (oDiv.offsetLeft=iTarget)写错了,应该是 if (oDiv.offsetLeft==iTarget)

    我背后有个胖...

    谢谢大神

    2016-10-18 20:02:24

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题