DOM运动案例

最新推荐文章于 2021-06-28 21:16:35 发布

FNbugE

最新推荐文章于 2021-06-28 21:16:35 发布

阅读量260

点赞数

分类专栏：前端开发文章标签： DOM运动 DOM运动案例

本文链接：https://blog.csdn.net/FNbugE/article/details/101203251

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

dom高级操作：运动

Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动起来，改变其自身的位置属性，比如高宽，左边距，上边距，透明度等。还有一个很重要的前提是，运动的物体必须是绝对定位.
案例：
HTML和css代码

	<style>
	    #div1{
			width: 150px;
			height: 150px;
			background-color: red;
			position: absolute;
			top:50px;
			left:0px;
		}
	</style>
	<body>
		  <button id="btn">点击运动</button>
		  <div id="div1"></div>
	</body>
	<script type="text/javascript">

JS的代码

   window.onload = function(){    
        var oBtn = document.getElementById('btn');    
        oBtn.onclick = function(){    
            var oDiv = document.getElementById('div1');    
            //设置定时器    
            setInterval(function(){    
                //改变物体位置    
                oDiv.style.left = oDiv.offsetLeft + 10 + 'px';    
            },30)                                                                         
        }    
    }  
    让页面中的obox元素的left值，每30毫秒，在自身left的基础上增加10像素

     为什么是30毫秒呢？
    因为电影播放每秒24帧，人眼就识别不出卡顿了，但是对于电脑来说，处理速度相对较快，需要每秒30帧以上才会显得流畅

运动边界的处理

 上述代码，点击btn之后，就能是物体向右运动。可是会一直向右动，不会停止。因此需要创立一个停止的条件。在条件符合的情况下，清楚定时器。其中对于目标点的判断，尤为重要。这就是运动边界的处理,主要是查看offsetLeft属性.

js代码

    window.onload = function(){    
        var oBtn = document.getElementById('btn');    
        oBtn.onclick = function(){    
            var oDiv = document.getElementById('div1');    
            //设置定时器    
           var timer =  setInterval(function(){    
			   if(oDiv.offsetLeft>300){   // 限制边界的宽度,避免其一直动
				   clearInterval(timer);
			   }else{
				    //改变物体位置    
					oDiv.style.left = oDiv.offsetLeft + 10 + 'px';    
			   }
               
            },30)                                                          
        }    
    }

重力回弹

加速效果：增加重力值，随着定时器的执行，重力增大

回弹效果：当抵达目标位置时，将速度改为负值

回弹减速：将速度改变为负值的同时，除以2减半.

小球回弹效果实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.cont{
				width: 1000px;
				height: 600px;
				background: #eee;
				margin: 20px auto;
				position: relative;
			}
			.box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;}
		</style>
	</head>
	<body>
		<div class="cont">
			<div class="box"></div>
		</div>
	</body>
	<script type="text/javascript">
		var obox = document.querySelector(".box");
		var ocont = document.querySelector(".cont");
		
		var speed = 10;		//步长
		var target = ocont.offsetHeight - obox.offsetHeight;	//目标
		var g = 2;			//重力
		var timer;			//计时器
		
		document.onclick = function(){
//			点击之前先清除,上一次
			clearInterval(timer)
			timer = setInterval(()=>{
//				重力加速
				speed += g;
//				判断是否到重点
				if(speed >= target-obox.offsetTop){
//					强行确认到重点
					obox.style.top = target + "px";
//					回弹，回弹损耗
					speed = -parseInt(speed*0.8);
//					console.log(speed)
//					当回弹不足1的时候,意味着不再弹起了,就可以清除计时器了
					if(Math.abs(speed) < 1){
						clearInterval(timer)
					}
				}else{
//					生效位置
					obox.style.top = obox.offsetTop + speed + "px";
				}
			},30)		//频率
		}
		
		
	</script>
</html>

透明度运动

当鼠标移动到元素上让其亮度显示.一走之后,就

opacity 值为0-1之间设置 div 元素的不透明级别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background: deepskyblue;
			position: absolute;
			left: 200px;
			top: 200px;
			opacity: .3;
		}
	</style>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var obj = document.querySelector("div");
	//alert(1 -  obj.style.opacity );
	obj.onmouseover = function(){
		startMove( 100 );
	}
	obj.onmouseout = function(){
		startMove( 30 );
	}
	var timer = null;
	var alpha = 30;
	function startMove(target){
		clearInterval( timer );
		timer = setInterval(function(){
			var speed = target - alpha > 0 ? 1 : -1;
			if( alpha == target ){
				clearInterval(timer);
			}else{
				alpha += speed;
				obj.style.opacity = (alpha)/100;
				console.log( alpha );
			}
		},30)
	}
</script>

图片的淡入淡出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#b1,#b2,#b3{
			width: 100px;
			height: 100px;
			background: deepskyblue;
			opacity: 0.3;
		}
		#b2{
			background: palevioletred;
			margin: 10px 0;
		}
	</style>
	<body>
		<div id="b1"></div>
		<div id="b2"></div>
		<div id="b3"></div>
	</body>
</html>
<script src="sport2.js"></script>
<script type="text/javascript">
	//鼠标移动到某个div上  该div的宽度变成300    离开该div  宽度恢复
	var divs = document.querySelectorAll("div");
	for( var i = 0 ; i < divs.length ; i++ ){
		divs[i].alpha = 30;
		divs[i].onmouseover = function(){
			startMove( this , 100 , "opacity");
		}
		divs[i].onmouseout = function(){
			startMove( this , 30 , "opacity");
		}
	}
	//var alpha = 30;
 	/*function startMove(obj,target){
 		clearInterval(obj.timer);
 		obj.timer = setInterval(function(){
 			var speed = target-obj.alpha > 0 ? 1 : -1;
 			if( obj.alpha == target ){
 				clearInterval(obj.timer);
 			}else{
 				obj.alpha += speed;
 				obj.style.opacity = obj.alpha/100 ;
 			}
 		},30)
 	}*/
 	
</script>

多属性缓冲运动函数封装

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		


	</script>
	<style>
		
	#box{
		
		width: 100px;
		height: 100px;
		background: #f10;
		position: absolute;
		left:1000px;
		top: 0;

	}

	#btn{
		position: absolute;
		top: 200px;
	}

	</style>
</head>
<body>
	<div id="box">
		
		</div>
	<div style="width:1px; height:300px; position:absolute; left:500px; top:0;background:#000;"></div>
	
	<button id="btn">开始运动</button>
	<script>
		
		var oBtn = document.getElementById("btn");
		var oBox = document.getElementById("box");

		oBtn.onclick = function(){

			move(500);

		}

		var timer = null;

		function move(target){
			// 1. 关闭开启定时器;
			clearInterval(timer);
			timer = setInterval(function(){
				//2.计算速度;
				var speed = (target - oBox.offsetLeft) / 10;
				// if(speed > 0){
				// 	speed = Math.ceil(speed);
				// }else{
				// 	speed = Math.floor(speed);
				// }
				// 速度取整判断;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				//console.log(speed,oBox.offsetLeft);	
				// 3. 终止运动;
				if(target == oBox.offsetLeft){
					clearInterval(timer);
				}else{
					oBox.style.left = oBox.offsetLeft + speed + "px";
				}
			}, 30);

		}



	</script>
</body>
</html><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#b1,#b2,#b3{
			width: 100px;
			height: 100px;
			background: deepskyblue;
		}
		#b2{
			background: palevioletred;
			margin: 10px 0;
		}
	</style>
	<body>
		<div id="b1"></div>
		<div id="b2"></div>
		<div id="b3"></div>
	</body>
</html>
<script type="text/javascript">
	//鼠标移动到某个div上  该div的宽度变成300    离开该div  宽度恢复
	var divs = document.querySelectorAll("div");
	for( var i = 0 ; i < divs.length ; i++ ){
		divs[i].onmouseover = function(){
			startMove( this , 300 );
		}
		divs[i].onmouseout = function(){
			startMove( this , 100 );
		}
	}
	//var timer = null;
 	function startMove(obj,target){
 		clearInterval(obj.timer);
 		obj.timer = setInterval(function(){
 			var speed = (target-obj.offsetWidth)/10;
 			speed = speed>0?Math.ceil(speed) : Math.floor(speed);
 			if( obj.offsetWidth == target ){
 				clearInterval(obj.timer);
 			}else{
 				obj.style.width = obj.offsetWidth + speed + "px";
 			}
 		},30)
 	}
 	/*
 	 多物体运动，由于多个元素共用同一个定时器   导致某些元素不能运动到目标值
 	 解决 ：  每一个元素都有一个独立的定时器
 	 */
</script>

圆周运动

三角函数：

sin = 对边/斜边

Math.sin(Math.PI/180*reg)*r

cos = 邻边/斜边

Math.cos(Math.PI/180*reg)*r

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{width: 20px;height: 20px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}
		</style>
	</head>
	<body>
		<!--<div class="box"></div>-->
	</body>
	<script type="text/javascript">
		var obox = document.querySelector(".box")
		var reg = 0;
		var speed = 47;
		var r = 200;
		var timer = null;
		
		timer = setInterval(()=>{
			
			reg += speed;
			
//			if(reg >= 360){
//				clearInterval(timer)
//			}
			
			var div = document.createElement("div");
			div.className = "box";
			
			var t = Math.sin( Math.PI/180 * reg ) * r
			var l = Math.cos( Math.PI/180 * reg ) *r
			
			div.style.left = l + 200 + "px";
			div.style.top = t + 200 + "px";
			
			
			document.body.appendChild(div)
			
		},100)
		
		
		
		
	</script>
</html>