速度动画中不能用oDiv.offsetLeft代替Div.style.left的原因是什么
这是可运行的源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲动画</title>
<style type="text/css">
body{padding: 0px;margin:0px;}
#div1{
height: 200px;
width: 200px;
background: #abcedf;
position: relative;
left: -200px;
}
#share{
display: block;
height: 150px;
width: 50px;
background: #666;
position: absolute;
left: 200px;
top: 20px;
}
</style>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
<ul>
<li>定时器</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
getIn(0);//写目的地,不是起点
}
oDiv.onmouseout = function(){
getIn(-200);//写目的地,不是起点
}
timer=null;
function getIn(iTarget){
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft<iTarget){
speed = 10;
}else{
speed = -10;
}
if(iTarget == oDiv.offsetLeft){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed+"px"; //可否调换？
}
},30)
}
}
</script>
</body>
</html>
我在调换了JS结尾的代码
结果是oDiv没有移动,console没有报错,于是我决定试试这两者分别会弹出什么
左图oDiv.offsetLeft是-200可以理解,为什么右图弹出空白？我用typeof查了发现是string,
有没有朋友解释下为什么这里是空字符串？
12只怕有心人1回答
随时随地看视频慕课网APP
JavaScript
前端工具