2015.7.11js-14(基本运动)

1.物体的基本运动。

原理：使用setInterval定时器让元素不断执行运动。

案例：物体的运动到一定距离后停止

js

var oMoveDiv = document.getElementById("wrap");
    var timer = null;
    var oBtn = document.getElementById("start");
    clearInterval(timer);                    //清除重复点击速度会加快
    oBtn.onclick = function(){
        timer = setInterval(function(){
            if(oMoveDiv.offsetLeft > 300){
                clearInterval(timer);
            }else{
                oMoveDiv.style.left = oMoveDiv.offsetLeft + 7 + "px";
            }
        },Math.round(1000/60));
    }

html

<style>
#wrap{width:100px;height:100px;background-color:red;position:absolute;left:0px;top:0px;}
</style>
<input type="button" id="btn" value="启动" />
<div id="wrap"></div>

2.侧边栏的移入移出动画

原理：鼠标的移入移出事件，调用动画。

js

    var oBtn = document.getElementById("wrapBtn");
    var oMoveDiv = document.getElementById("wrap");
    var timer = null;
    oMoveDiv.onmouseover = function(){
        move(0)
    }
    oMoveDiv.onmouseout = function(){
        move(-200)
    }
    function move(iTarget){
        var speed;
        if(iTarget > oMoveDiv.offsetLeft){　　　　　　//根据目标值来判断速度方向
            speed = 10;
        }else{
            speed = -10;
        }
        clearInterval(timer);　　　　　　　　　　　　　//每次执行前先清除定时器
        timer = setInterval(function(){
            if(oMoveDiv.offsetLeft == iTarget){
                clearInterval(timer);
            }else{
                oMoveDiv.style.left = oMoveDiv.offsetLeft + speed + "px";
            }
        },Math.round(1000/60));
    }

html

<style>
#wrap{width:200px;height:200px;position:absolute;left:-200px;top:50px;background:red;}
#wrapBtn{width:30px;height:75px;background:blue;color:#fff;position:absolute;left:200px;top:50px;text-align:center;padding-top:25px;cursor:pointer;}
</style>
<div id="wrap">
    <div id="wrapBtn">分享</div>
</div>

3.一张图片透明值的淡放淡出

原理：根据图片的opactiy和filter:alpha的值来切换透明值。原理同运动动画

js

window.onload = function(){
    var alpha = 30;　　　　　　　　　　　　　　　　　　　　//原本css中的透明值
    var oWrap = document.getElementById("wrap");　　
    var timer = null;function move(iTarget){      　　　　　　　　　　　//封装函数
        clearInterval(timer)　　　　　　　　　　　　　　//每次执行前先清除定时器
        timer = setInterval(function(){ 　　　　　　　
            var speed = 0;
            if(alpha < iTarget){　　　　　　　　　　　//根据目标值来控制透明值和速度
                speed = 1;
            }else{
                speed = -1;
            }
            if(alpha == iTarget){
                clearInterval(timer);　　　　　　　　//如果等于目标值才停止定时器
            }else{
                alpha += speed;
                oWrap.style.filter = ‘alpha(opacity:‘+alpha+‘)‘;     //IE下
                oWrap.style.opacity = alpha/100;　　　　　　　　　　　　//其他
            }
        },Math.round(1000/60));
    }
    oWrap.onmouseover = function(){
        move(100);
    }
    oWrap.onmouseout = function(){
        move(30);
    }
}

html

<style>
#wrap{opacity:0.3; filter:Alpha(opacity:30);}
</style>
<div id="wrap2">
    <img id="wrap"src="images/slide5.jpg" />
</div>