JavaScript缓冲运动实现方法(2则示例)
本文实例讲述了JavaScript缓冲运动实现方法。分享给大家供大家参考，具体如下：
实现原理：(目标距离-当前距离)/基数=速度(运动距离越大速度越小，运动距离和速度成反比)
(500-oDiv.offsetLeft)/7=iSpeed;
需要注意：当计算出来的速度有小数时需要取整；
(500-oDiv.offsetLeft)/7=iSpeed;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
例子1：滑块缓冲运动
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>缓冲运动</title>
<style>
#div1{width:100px;height:100px;background:red;position:absolute;top:50px;left:0;}
span{width:1px;height:300px;background:black;position:absolute;left:300px;top:0;display:block;}
</style>
<script>
window.onload=function()
{
varoBtn=document.getElementById('btn1');
varoDiv=document.getElementById('div1');
oBtn.onclick=function()
{
startMove(oDiv,300);
};
};
vartimer=null;
functionstartMove(obj,iTarget)
{
clearInterval(timer);
timer=setInterval(function(){
variSpeed=(iTarget-obj.offsetLeft)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iTarget==obj.offsetLeft){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+iSpeed+'px';
}
},30);
}
</script>
</head>
<body>
<inputid="btn1"type="button"value="移动"/>
<divid="div1"></div>
<span></span>
</body>
</html>
例子2：侧边栏滑动
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>侧边栏滑动</title>
<style>
#div1{width:100px;height:100px;background:red;position:absolute;right:0;top:0;}
</style>
<script>
window.onload=window.onscroll=function()
{
varoDiv=document.getElementById('div1');
variScrollTop=document.documentElement.scrollTop||document.body.scrollTop;
varclientHeight=document.documentElement.clientHeight;
variH=(clientHeight-oDiv.offsetHeight)/2+iScrollTop;
//oDiv.style.top=iH+'px';
startMove(oDiv,parseInt(iH));
};
vartimer=null;
functionstartMove(obj,iTarget)
{
clearInterval(timer);
timer=setInterval(function(){
variSpeed=(iTarget-obj.offsetTop)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetTop==iTarget){
clearInterval(timer);
}else{
obj.style.top=obj.offsetTop+iSpeed+'px';
}
},30);
}
</script>
</head>
<bodystyle="height:2000px;">
<divid="div1"></div>
</body>
</html>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。