看里面的疑问：疑问：alert里面这样用,第一次显示不出left值,后面才可以，为什么？换成offsetLeft第一次就可以显示出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<style type="text/css">
*{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>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=startMove; /*不加括号,就是正常的,鼠标滑过,开始移动,表示鼠标滑过,调用这个函数*/
/*div1.onmouseover=startMove();*/
/*加了括号之后,一打开就开始移动,表示,把函数执行的结果给div1的鼠标滑过事件,所以会去先执行函数,因为函数执行的结果就是offsetLeft==0,然后把这个结果给div1的鼠标滑过事件,所以会出现一打开就跑,这是为了得到函数执行的结果*/
};
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 id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
