12,缓冲运动。匀速运动停止条件

缓冲运动：iSpeed=(iTarget-oDiv.offsetLeft)/7;速度离目标点越远，速度越大，离目标点越近速度越小；

只支持1px是最小单位，没有0.5px。所以当iSpeed为小数时如（0.7），oDiv.style.Left=oDiv.offsetLef+iSpeed+'px';会把小数部分去掉，Div的位置永远到不了目标点；所以用Math.ceil(iSpeed);向上取值；当速度为负，则用Math.floor(iSpeed);向下取值；

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>
</body>

js:

<script>
function startMove()
{
    var oDiv=document.getElementById('div1');
    setInterval(function (){
        var speed=(300-oDiv.offsetLeft)/10;
        //speed=Math.floor(speed);
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        
        oDiv.style.left=oDiv.offsetLeft+speed+'px';
        
        document.title=oDiv.offsetLeft+','+speed;
    }, 30);
}
</script>

练习1：对联浮动

目标点:iTarget:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';

为防止目标点是小数造成div上下不停跳动，iTarget为parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);

html

<body style="height:2000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>

CSS:

<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>

JS:

<script>
window.onscroll=function ()
{
    var oDiv=document.getElementById('div1');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    
    //oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
    startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
};

var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=(iTarget-oDiv.offsetTop)/4;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        
        if(oDiv.offsetTop==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            document.title=iTarget;
            document.getElementById('txt1').value=oDiv.offsetTop;
            oDiv.style.top=oDiv.offsetTop+speed+'px';
        }
    }, 30);
}
</script>

 匀速运动停止条件:

当Div的位置与目标值非常接近的时候，距离不足一步即一个速度iSpeed的时候，关闭定时器，并使div的位置等于目标值；

HTML：

<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

CSS:

<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>

JS:

<script>
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(oDiv.offsetLeft<iTarget)
        {
            speed=7;
        }
        else
        {
            speed=-7;
        }
        
        if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
        {
            clearInterval(timer);
            
            oDiv.style.left=iTarget+'px';
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>

运动框架：1清楚定时器；clearInterval(timer);

　　　　　　2.设置定时器；timer=setInterval(fun,30);

　　　　　　3.判断速度条件；if else

　　　　　　4，判断运动停止条件；if else

posted @ 2013-06-20 16:36  猫多多  阅读(344)  评论(0)  编辑  收藏  举报