能否帮忙检查一下代码,动画效果不出来

能否帮忙查看一下代码


<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>动画效果</title>

 <style type="text/css">

 *{margin:0;

 padding:0;}

#div1{

    width:180px;

    height:300px;

    background:#C9F;

    border-radius:10px;

    position:relative;

    left:-180px;

    

    }

#div1 #share{

    width:20px;

    height:30px;

    background:#CC3;

    color:#93C;

    position:relative;

    left:180px;

    top:90px;

    }

 </style>

 <script language="text/javascript">

window.onload=function(){

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

    oDiv.onmouseover=function(){

        startMove(0);

    }

    oDiv.onmouseout=function(){

        startMove(-180);

    }

}

    var timer=null;

function startMove(iTarget){

    clearInterval(timer);

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

    timer=setInterval(function(){

        var speed=0;

        if(oDiv.offsetLeft>iTarget){

            speed=-10;

            }

        else{

            speed=10;

            }

        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>


浅水花梧桐_0
浏览 1151回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript