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

看里面的疑問：疑問：alert里面這樣用,第一次顯示不出left值,后面才可以，為什么？換成offsetLeft第一次就可以顯示出來

<!DOCTYPE html>

<html>

<head>

<title>practice</title>

*{margin:0px;padding:0px;}

#div1 {position:relative;left:-200px;width:200px;height:200px;margin-top:50px;background-color: pink;}

#share{background-color:lightblue;width:20px;height:50px;position: absolute;left:200px;top:75px;}

</style>

window.onload=function(){

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

div1.onmouseover=startMove; /*不加括號,就是正常的,鼠標(biāo)滑過,開始移動,表示鼠標(biāo)滑過,調(diào)用這個函數(shù)*/

/*div1.onmouseover=startMove();*/

/*加了括號之后,一打開就開始移動,表示,把函數(shù)執(zhí)行的結(jié)果給div1的鼠標(biāo)滑過事件,所以會去先執(zhí)行函數(shù),因?yàn)楹瘮?shù)執(zhí)行的結(jié)果就是offsetLeft==0,然后把這個結(jié)果給div1的鼠標(biāo)滑過事件,所以會出現(xiàn)一打開就跑,這是為了得到函數(shù)執(zhí)行的結(jié)果*/

};

function startMove(){

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

var timer=setInterval(

function(){

if(div1.offsetLeft==0){clearInterval(timer)}//判斷要計算,所以不能帶'px',用offsetLeft

else {alert(div1.style.left);//offsetLeft顯示無'px',style.left顯示有'px'

//疑問：alert里面這樣用,第一次顯示不出left值,后面才可以，為什么？換成offsetLeft第一次就可以顯示出來

div1.style.left=div1.offsetLeft+10+'px';//這個地方要+—,最好不帶'px'

}}

? ,500);

}

</script>

</head>

<body>

</div>

</body>

</html>

慕粉18221508921

2016-11-16

源自：JS動畫效果 2-1

關(guān)注問題我要回答

1041

操作

收起

2 回答

幕布斯7328391
2016-11-20

首先，要想第一次就顯示出style.left的值，必須在元素里設(shè)置style，如<div id="div1" style="position:relative;left:-200px;"> ，所以你的問題中第一次顯示不出left值，是因?yàn)椴]有在style中設(shè)置，而第一次alert之后你設(shè)置了div1.style.left，后面的alert(div1.style.left)都能輸出值。

其次，弄明白left這些位置值都是我們賦予給它的，我們沒在style中去設(shè)置，第一次自然顯示不出來。而offesetLeft瀏覽器會根據(jù)元素位置自動給offsetLeft賦值。