js动画之多物体运动

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动画之多物体运动相关的知识，希望对你有一定的参考价值。

多个物体这不能使用一个定时器了，要给每个物体一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多物体运动</title>
	<style>
    body{margin: 0px;padding: 0px;}
		.animation{
			background-color: green;
            margin: 10px 0px;
            padding: 0px;
			height: 100px;
			width: 100px;
			left: 0px;
			top: 0px;
            position: relative;
		}
	</style>
</head>
<body>
	<div  class="animation">A</div>
    <div  class="animation">B</div>
    <div  class="animation">C</div>
</body>
 <script type="text/javascript">
    window.onload = function(){
    	var ele = document.getElementsByTagName("div"),
            WINDOW_WIDTH = window.innerWidth - 100;
            for (var i = 0; i < ele.length; i++) {
                ele[i].timer = null;
                ele[i].onmouseover = function(){
                    startAnimation(this);
                }
            };
    	

    	function startAnimation(obj){
    		clearInterval(obj.timer);
    		obj.timer = setInterval(function(){
                var _left = obj.offsetLeft,
                    _speed = Math.ceil((WINDOW_WIDTH - _left)/100);

    			if (obj.offsetLeft >= WINDOW_WIDTH){
    				clearInterval(obj.timer);
    			}else{
                    obj.style.left = obj.offsetLeft+ _speed +‘px‘;
                    console.log(obj.style.left);
                    console.log(obj.offsetLeft);
                }
    			
    		},1)
    	}

    	
    }
 </script>
</html>

　　这里给每个div加上一个定时器~~ 还要注意的就是给body加上margin:0px;padding:0px;如果不加的话，那么obj.style.left和obj.offsetLeft是不会相等（因为我们这里使用的是相对定位）

以上是关于js动画之多物体运动的主要内容，如果未能解决你的问题，请参考以下文章

js动画之速度

js动画学习

[js高手之路] html5 canvas动画教程 - 匀速运动

JS动画之速度动画和透明度变化

js运动

JS动画之缓冲动画与多物体动画即获取样式的方法