javascript - 动画的缓冲问题
本文介绍了javascript - 动画的缓冲问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在模仿人家的代码学习缓冲，但是对其中的一段不理解。
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值。也就导致了速度越来越慢
这篇关于javascript - 动画的缓冲问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
