11,运动基础框架（匀速）

匀速运动（框架）：给物体不断加速度，用setInterval来循环执行；

用timer来储存setInterval返回的id值；clearInterval(timer);清除定时器，让运动停止。用if else 来判断运动是移动还是停止；

每执行一次事件（点击按钮）要清楚一次定时器，防止定时器叠加使速度不断加快；

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

js代码：

<script>
var timer=null;

function startMove()
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);//清除上一次点击时发生的定时器
    timer=setInterval(function (){
        var speed=1;
        //判断是运动还是停止
        if(oDiv.offsetLeft>=300)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>

练习：分享到

鼠标移入移出，改变div的左侧距离（用匀速运动框架）；用当前的左侧距离oDiv.offsetLef与目标点iTarget比较；借以判断速度方向，oDiv.offsetLeft<iTarget则iSpeed为正，反之则为负；

当到达目标点时，关闭定时器，运动停止；

HTML:

<body>
<div id="div1">
    <span>分享到</span>
</div>

CSS:right:-20;

<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>

JS:

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmouseover=function ()
    {
        startMove(0);
    };
    oDiv.onmouseout=function ()
    {
        startMove(-150);
    };
};

var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(oDiv.offsetLeft>iTarget)//判断速度方向；
        {
            speed=-10;
        }
        else
        {
            speed=10;
        }
        
        if(oDiv.offsetLeft==iTarget)//运动或停止；
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    }, 30);
}
</script>

练习2：图片淡入淡出；

改变图片的透明度：opacity来实现；用运动框架改变opacity;当前的透明度用一个变量储存：Alhpa=30；比较Alpha与iTarget目标值之间大小来确定速度方向。

透明度变化过程：Alpha+=iSpeed;变化的是Alpha,再将该值赋值给oDiv.style.filter:(ie)或者oDiv.style.opacity;

html:

<body>
<div id="div1"></div>
</body>

JS:

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmouseover=function ()
    {
        startMove(100);
    };
    oDiv.onmouseout=function ()
    {
        startMove(30);
    };
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        
        if(alpha<iTarget)
        {
            speed=10;
        }
        else
        {
            speed=-10;
        }
        
        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            alpha+=speed;
            
            oDiv.style.filter='alpha(opacity:'+alpha+')';
            oDiv.style.opacity=alpha/100;
        }
    }, 30);
}
</script>