深度讲解多物体运动框架

Mr.ZKH

于 2019-08-27 18:20:33 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100105958

版权

封装⼀个⽅法让多个物体共⽤,本节讲解变速运动

注意变速运动要做向上向下取整的操作

注意再重新启动定时器是要把之前的定时器清除

多物体运动每个物体要有⾃⼰的定时器，共⽤会出现bug

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>深度讲解多物体运动框架</title>
	<style type="text/css">
		#div1,div{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-right:50px;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div></div>
	<div></div>

	<script type="text/javascript">
		var oDiv = document.getElementsByTagName('div')
		//var timer = null

		for(var i=0; i<oDiv.length; i++){
			oDiv[i].timer = null
			//添加鼠标移入事件
			oDiv[i].onmouseover=function(){
				moving(this,400)
			}

			//添加鼠标移出事件
			oDiv[i].onmouseout=function(){
				moving(this,100)
			}
		}

		function moving(obj,target){
			clearInterval(obj.timer)
			obj.timer=setInterval(function(){
				//变速变量
				var speed = (target-obj.offsetHeight)/8
				//做向上取整和向下取整处理
				speed = speed>0?Math.ceil(speed):Math.floor(speed)
				if(obj.offsetHeight==target){
					clearInterval(obj.timer)
				}else{
					obj.style.height = obj.offsetHeight + speed + 'px'
				}
			},30)
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深度讲解多物体运动框架

封装⼀个⽅法让多个物体共⽤,本节讲解变速运动注意变速运动要做向上向下取整的操作注意再重新启动定时器是要把之前的定时器清除多物体运动每个物体要有⾃⼰的定时器，共⽤会出现bug<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>深度讲解多物体运...
复制链接

扫一扫