                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

移出的時候正常，移入的時候一直在幌

<!DOCTYPE?html>
<html>

<head>
????<meta?charset="utf-8">
????<title>JS動畫的學習</title>
</head>
<style>
????*?{
????????margin:?0;
????????padding:?0;
????}

????#div_share?{
????????width:?200px;
????????height:?200px;
????????position:?relative;
????????background-color:?red;
????????left:?-200px;
????????top:?200px;
????}

????#span_share?{
????????width:?20px;
????????height:?40px;
????????background-color:?blue;
????????position:?absolute;
????????left:?200px;
????????top:?75px;
????}
</style>

<body>
????<div?id="div_share">
????????<span?id="span_share">分享</span>
????</div>

????<script?type="text/javascript">
????????window.onload?=?function()?{
????????????var?div_share?=?document.getElementById("div_share");?//快捷鍵：geti=getElementById
????????????div_share.onmouseover?=?function()?{
????????????????startMove(0);
????????????}

????????????div_share.onmouseout?=?function()?{
????????????????startMove(-200);
????????????}
????????????var?timmer?=?null;

????????????function?startMove(target)?{?//快捷鍵:fn?新建一個方法
????????????????clearInterval(timmer);?//先清除以上的定時器
????????????????var?div_share?=?document.getElementById("div_share");?//快捷鍵：geti=getElementById
????????????????//錯誤的地方timer?=?setInterval(function()?{?//快捷鍵：si??新建一個定時器
????????????????timmer?=?setInterval(function()?{?//快捷鍵：si??新建一個定時器
????????????????????var?speed?=?0;
????????????????????speed?=?div_share.offsetLeft?>?target???-10?:?10;//三目運算比if?else來的簡單多了
????????????????????if?(div_share.offsetLeft?==?target)?{
????????????????????????clearInterval(timmer);
????????????????????}?else?{
????????????????????????div_share.style.left?=?div_share.offsetLeft?+?speed?+?"px";
????????????????????}
????????????????},?30);
????????????}
????????}
????</script>
</body>

</html>