<!DOCTYPE?html>
<html>
<head>
<title>動畫</title>
<meta?charset="utf-8">
<style?type="text/css">
????#div{
???? width:?200px;
???? height:?200px;
???? background:?red;
???? position:?relative;
???? left:?-200px;
???? top:?0;
????}
#div?span{
????????????width:?20px;
????????????height:?50px;
????????????background:?blue;
????????????position:?absolute;
????????????left:?200px;
????????????top:?75px;
}
</style>
<script?type="text/javascript">
window.onload=function()
{
var?oDiv=document.getElementById('div');
oDiv.onmouseover=function()
{
startmove();
}
}
var?timer?=null;
function?startmove()
{
clearInterval(timer);
var?oDiv=document.getElementById('div');
var?speed=10;
timer=setInterval(function(){
if?(oDiv.offsetLeft?==?0)?
{
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
????}
},30)
}
</script>
</head>
<body>
<div?id="div"?><span?id="share">分享</span></div>
</body>
</html>
2017-08-19
代碼是沒錯的，但是你沒有清除瀏覽器默認樣式。*{margin:0;padding:0},所以你這里每次加上speed ?10px，得不到left值為0，會直接由-2px跳到16px
2017-08-06
我也看不出來哪里出錯了。樓主現(xiàn)在發(fā)現(xiàn)哪里錯了嗎？ 指點一下-.-！