為什么我寫的老是左右晃動啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>速度動畫</title>
<style type="text/css">
? ? ?*{margin:0;padding:0;}
? ? ?#div1{
width:200px;
height:100px;
background:#0F3;
position:relative;
left:-200px;
cursor:pointer;}
#div1 span{
display:block;
height: 46px;
position: absolute;
right: -23px;
width: 23px;
top:20px;
text-align:center;
background:#F00;
}
</style>
<script type="text/javascript">
? ? window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=function(){
?startMove();
}
div1.onmouseout=function(){
returnMove();
}
}
? ? ? function startMove(){
?clearInterval(timer);
?var div1=document.getElementById("div1"),
? ? ? timer=null;
? timer=setInterval(function(){
? ? if(div1.offsetLeft==0){clearInterval(timer);}
?else{div1.style.left=div1.offsetLeft+10+'px';}
? },30);
?}
? ? ? function returnMove(){
?clearInterval(timer);
?var div1=document.getElementById("div1"),
? ? ? timer=null;
? timer=setInterval(function(){
? ? if(div1.offsetLeft== -200){clearInterval(timer);}
?else{div1.style.left=div1.offsetLeft-10+'px';}
? },30);
?}
</script>
</head>
<body>
? <div id="div1">
? ? <span>分享</span>
? </div>
</body>
</html>
2015-08-10
timer 應(yīng)該設(shè)為全局變量 startMove 與 returnMove 共用