42、JavaScript的运动----多个物体同时运动

最新推荐文章于 2022-02-27 21:02:42 发布

Bwz_Learning

最新推荐文章于 2022-02-27 21:02:42 发布

阅读量564

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript JavaScript的运动 DIV的淡入淡出

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51742885

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、多个物体同时运动
---例子：多个Div，鼠标移入变宽
单定时器，存在问题
每个Div一个定时器
2、多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
---例子：多个Div淡入淡出
所有东西都不能公用

属性与运动对象绑定：速度、其他属性值（如透明度等）

3、多个Div，鼠标移入变宽的例子

3.1 代码

       <head>
		<meta charset="UTF-8">
		<title>多物体运动框架</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 50px;
				background: red;
				margin-top: 50px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
					//获取元素
					var aDiv = document.getElementsByTagName("div");
					for (var i = 0; i < aDiv.length; i++) {
						aDiv[i].onmousemove = function() {
							startMove(this, 300);
						}
						aDiv[i].onmouseout = function() {
							startMove(this, 100);
						}
					}
				}
				//运动函数
			function startMove(obj, iTarget) {
				//清楚定时器函数
				//由于是是适应于多个对象的变化,所以每个DIV有一个定时器
				clearInterval(obj.timer);
				//定时器函数
				//每一个对象,有一个定时器
				obj.timer = setInterval(function() {
					//记录速度
					var iSpeed = (iTarget - obj.offsetWidth) / 5;
					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
					//运动和停止的判断条件
					if (obj.offsetWidth == iTarget) {
						//清楚定时器函数
						clearInterval(obj.timer);
					} else {
						obj.style.width = obj.offsetWidth + iSpeed + 'px';
					}
				}, 30);
			}
		</script>
	</head>

	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>

3.2 多个DIV淡入淡出的例子

<head>
		<meta charset="UTF-8">
		<title>多物体运动框架</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background: red;
				margin-top: 50px;
				filter: alpha(opacity: 30);
				opacity: 0.3;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
					//获取元素
					var aDiv = document.getElementsByTagName("div");
					for (var i = 0; i < aDiv.length; i++) {
						//将alpha作为,物体的一个属性
						aDiv[i].alpha = 30;
						aDiv[i].onmousemove = function() {
							startMove(this, 100);
						}
						aDiv[i].onmouseout = function() {
							startMove(this, 30);
						}
					}
				}
				//运动函数
			function startMove(obj, iTarget) {
				//清楚定时器函数
				clearInterval(obj.timer);
				//定时器函数
				obj.timer = setInterval(function() {
					//记录速度
					var iSpeed = (iTarget - obj.alpha) / 8;
					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
					//运动和停止的判断条件
					if (obj.alpha == iTarget) {
						//清楚定时器函数
						clearInterval(obj.timer);
					} else {
						obj.alpha += iSpeed;
						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>

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
42、JavaScript的运动----多个物体同时运动

1、多个物体同时运动 ---例子：多个Div，鼠标移入变宽单定时器，存在问题每个Div一个定时器2、多物体运动框架定时器作为物体的属性参数的传递：物体、目标值 ---例子：多个Div淡入淡出所有东西都不能公用属性与运动对象绑定：速度、其他属性值（如透明度等）
复制链接

扫一扫

专栏目录