首页手记 JavaScript动画之多物体动画

JavaScript动画之多物体动画

标签：

Html/CSS JavaScript

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/demo1.css">
    <script src ="../js/demo1.js"></script> -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            width: 200px;
            height: 100px;
            background-color: #fd8e2f;
            margin: 0 0 20px 0;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var lis = document.getElementsByTagName('li');
            for(var i=0;i<lis.length;i++){
                lis[i].timer = null;
                lis[i].onmouseover=function(){
                    startWidth(this,400);
                };
                lis[i].onmouseout = function(){
                    startWidth(this,200);
                };
            }
        };

        function startWidth(obj,oTarget){
            clearInterval(obj.timer);

            obj.timer = setInterval(function(){
                var flag = oTarget-obj.offsetWidth;
                var speed= flag>0?Math.ceil(flag/10):Math.floor(flag/10);
                if(flag===0){speed=0;}
                obj.style.width = obj.offsetWidth+ speed +"px";
                if(obj.offsetWidth===oTarget){
                    clearInterval(obj.timer);
                }
            },30);
        }
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

点击查看更多内容