首页 > 代码库 > 关于javascript缓冲运动的笔记
关于javascript缓冲运动的笔记
Js里面有关运动的框架比较多,先从基本开始,我感觉缓冲运动是比教基础而且比较重要的,先提供一个小例子。
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementById("btn1");
var oDiv = document.getElementById("div1"); //通过Id获取div
oBtn.onclick = function()
{
startMove(310); //设置目标值,既要到达的位置
}
function startMove(iTarget) //传入目标值,运动到什么地方
{
clearInterval(timer); //再开启一个定时器之前,先初始化,清除已经开启的,避免造成影响
var timer = null;
timer = setInterval(function(){
var iSpeed = (iTarget - oDiv.offsetLeft)/10 ; //再用offsetLeft之前,要给操作对象定位,拥有一个 letf 值
iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//一般的if,else语句都能写成三目运算符
// if(iSpeed>0){
// iSpeed = Math.ceil(iSpeed); //向上取整,使运动速度取整,这样可以避免操作对象在到达目标之前停下来
// }else{
// iSpeed = Math.floor(iSpeed); //向下取整
// }
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}else
{
oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘;
}
document.title = oDiv.style.left;
},30);
};
};
</script>
这是有关缓冲运动比较实用的一些思路,以后应该也会该进一些,最主要的还是要了解目标值与速度的关系
关于javascript缓冲运动的笔记