js运动技术--多物体同时运动

最新推荐文章于 2023-04-28 09:12:32 发布

柏油

最新推荐文章于 2023-04-28 09:12:32 发布

阅读量342

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75042924

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

注意：每个物体需要单独使用一个定时器

样例1：多个div变宽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {height: 50px;width: 100px;background: red;margin: 10px;}
		</style>
		<script>
			
			window.onclick =function(){
				var aDiv =document.getElementsByTagName("div");
				
				for(var i = 0; i < aDiv.length; i++){
					
					aDiv[i].timer = null;
					
					aDiv[i].onmouseover = function(){
						startMove(this,400);
					}
					
					aDiv[i].onmouseout = function(){
						startMove(this,100);
					}
				}
			}
			
			function startMove (obj,iTarget){
				clearInterval(obj.timer);
				obj.timer = setInterval(function(){
                    if(obj.offsetWidth == iTarget){
                    	clearInterval(obj.timer);
                    }
                    else {
                    	var speed = (iTarget - obj.offsetWidth) / 6;
                    	speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    	
                         obj.style.width = obj.offsetWidth + speed + 'px';
                    }
				},30);
			}
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

样例2：多个div淡入淡出：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{height: 200px;width: 200px;background: red;margin: 20px;float: left;
			filter: alpha(opacity:30);opacity: 0.3;}
		</style>
		<script>
			window.onclick = function(){
				var aDiv = document.getElementsByTagName("div");
				for(var i = 0; i < aDiv.length; i++){
					aDiv[i].timer = null;
					aDiv[i].alpha = 30;
					
					aDiv[i].onmouseover = function(){
						startMove(this,100);
					}
					aDiv[i].onmouseout = function(){
						startMove(this,30);
					}
				}
			}
			function startMove(obj,iTarget){
				clearInterval(obj.timer);
				
				obj.timer = setInterval(function(){
					var speed = (iTarget - obj.alpha)/6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if(obj.alpha == iTarget){
						clearInterval(obj.timer);
					}
					else {
						obj.alpha += speed;
						obj.style.filter = 'alpha(opacity'+obj.alpha+')';
						obj.style.opacity = obj.alpha / 100;
					}
				},30);
			}
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

从两个例子可以看出：对于多物体运动来说，不能使用公用的参数，可以通过添加属性来完成。

柏油

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js运动技术--多物体同时运动

注意：每个物体需要单独使用一个定时器 div {height: 50px;width: 100px;background: red;margin: 10px;} window.onclick =function(){ var aDiv =document.getElementsByTagName("div");
复制链接

扫一扫