在模仿人家的代码学习缓冲,但是对其中的一段不理解。
html和css代码是这样的:
<style>
body,div,span{
margin:0;
padding:0;
}
#div1{
width:200px;
height:200px;
background: red;
position: relative;
left:-200px;
top:0;
}
#div1 span{
width: 20px;
height:50px;
background-color: blue;
position: absolute;
left:200px;
top:75px;
}
</style>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
js代码是这样的:
window.onload = function () {
var odiv = document.getElementById('div1');
odiv.onmouseover = function () {
startMove(0);
};
odiv.onmouseout = function () {
startMove(-200);
}
};
var timer;
function startMove(iTarget) {
// 由于每次onmouseover都会执行一次startMove,因此会导致每次像素的移动距离都是在叠加
// 所以在每次调用该函数时需要清楚上次计时器带来的效果
clearInterval(timer);
var odiv = document.getElementById('div1');
timer = setInterval(function(){
var speed = (iTarget - odiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(odiv.offsetLeft == iTarget){
clearInterval(timer);
}
else {
odiv.style.left = odiv.offsetLeft + speed + "px";
}
},30)
}
我的问题主要在这一段
var speed = (iTarget - odiv.offsetLeft)/10;
因为iTaget
和odiv.offsetLeft
的值都是固定的,假如差是200,除以10,结果也就是20px,每30毫秒重复一次,所以变化应该是恒定的呀,但事实确是开始快,结束慢。
还有这一段
speed = speed>0?Math.ceil(speed):Math.floor(speed);
为什么要调用Math方法,明明是整数,怎么会变成浮点数。
就这两个地方有点不理解。
谢谢帮助。
itarget的值固定,但是offsetleft每次都会取当前时间的值,随着时间推移,会越来越接近target值。也就导致了速度越来越慢