首页手记 JS动画--------多物体动画

JS动画--------多物体动画

标签：

Html/CSS JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS多物体动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{
    list-style: none;
}
ul li{
    width: 200px;
    height: 100px;
    background: yellow;
    margin-bottom: 20px;
    border: 4px solid #000;
}
</style>
<script type="text/javascript">
/**JS多物体动画：实现多物体运动的关键点：<1>获取到每个元素<2>给每个元素绑定上事件<3>注意使用this区分当前操作的元素<4>定时器不能只设定一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成宽度一样的bug（注意：多物体运动不能共同用一个东西（某一参数，比如定时器）**/
window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    //遍历li便签数组
    for(var i=0;i<aLi.length;i++){
        //给每一个li元素定义一个定时器，避免多个元素抢同一个定时器造成bug  
        aLi[i].timer=null;//为每个li都设置一个timer
        aLi[i].onmouseover=function(){
            //传入this值，指定当前操作的是哪个li  
            startMove(this,400);//this表示当前对象，当鼠标滑过时变为400px
        };
        aLi[i].onmouseout=function(){
            startMove(this,200);
        };
    }
};
//获取样式的函数
function getStyle(obj,attr){
    if (obj.currentStyle) {
        return obj.currentStyle[attr];//针对IE浏览器
    } else {
        return getComputedStyle(obj,false)[attr];//针对firfox浏览器
    }
}
//var timer=null;
function startMove(obj,iTarget){
    //清除定时器
    clearInterval(obj.timer);
    //设置定时器
    obj.timer=setInterval(function(){
        var icur=parseInt(getStyle(obj,'width'));
        var speed=(iTarget-icur)/8;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(icur==iTarget){
            clearInterval(obj.timer);
        }else{
            obj.style.width=icur+speed+'px';
        }
    },30);
}
</script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

点击查看更多内容