求大牛指导代码的含义

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				perspective: 1000px;
			}
			#wrap {
				width: 200px;
				height: 200px;
				margin: 200px 200px;
				border: 1px solid black;
				position: relative;
				transform-style: preserve-3d;
				
			}
			
			#wrap>div {
				width: 100%;
				height: 100%;
				border: 1px solid red;
				position: absolute;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="div1"></div>
			<div id="div2"></div>
			<div id="div3"></div>
			<div id="div4"></div>
			<div id="div5"></div>
			<div id="div6"></div>
		</div>
	</body>
	<script type="text/javascript">
		var wrap = document.getElementById('wrap');
		var divs = wrap.getElementsByTagName('div');
		var whole = document.getElementById("whole");

		for(var i = 0; i < 4; i++) {
			divs[i].style.transform = "rotateY(" + i * 90 + "deg) translateZ(100px)";
		}
		for(var i = 4; i < 6; i++) {
			divs[i].style.transform = "rotateX(" + Math.pow(-1, i) * 90 + "deg) translateZ(" + Math.pow(-1, i) * 100 + "px)";
		}

		var isMoving = false;
		var lastMouseX = 0;
		var lastMouseY = 0;
		var curMouseX = 0,
			curMouseY = 0;
		var lastAngleX = 0,
			lastAngleY = 0;
		var angleX = 0,
			angleY = 0;

		document.addEventListener("mousedown", mouseDownHandler);

		document.addEventListener("mouseup", mouseUpHandler);

		function mouseDownHandler(e) {
			lastMouseX = e.clientX;
			lastMouseY = e.clientY;
			lastAngleX = angleX;
			lastAngleY = angleY;
			curMouseX = e.clientX;
			curMouseY = e.clientY;

			document.addEventListener("mousemove", mouseMoveHandler);
		}

		function mouseMoveHandler(e) {
			curMouseX = e.clientX;
			curMouseY = e.clientY;
			angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3;
			angleY += (curMouseY - lastMouseY + lastAngleY - angleY) * 0.3;
			angleY = Math.max(-60, Math.min(60, angleY));
	
			console.log(angleY);
			wrap.style.transform = "rotateX(" + angleY + "deg)";
			wrap.style.transform = "rotateY(" + angleX + "deg)";
		}

		function mouseUpHandler(e) {
			curMouseX = e.clientX;
			curMouseY = e.clientY;

			document.removeEventListener("mousemove", mouseMoveHandler);
		}

		//刷新场景
		requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||

			function(callback) {
				setTimeout(callback, 1000 / 60);
			}
	</script>

</html>

上面代码中的一部分

var isMoving = false;
		var lastMouseX = 0;
		var lastMouseY = 0;
		var curMouseX = 0,
			curMouseY = 0;
		var lastAngleX = 0,
			lastAngleY = 0;
		var angleX = 0,
			angleY = 0;

		document.addEventListener("mousedown", mouseDownHandler);

		document.addEventListener("mouseup", mouseUpHandler);

		function mouseDownHandler(e) {
			lastMouseX = e.clientX;
			lastMouseY = e.clientY;
			lastAngleX = angleX;
			lastAngleY = angleY;
			curMouseX = e.clientX;
			curMouseY = e.clientY;

			document.addEventListener("mousemove", mouseMoveHandler);
		}

		function mouseMoveHandler(e) {
			curMouseX = e.clientX;
			curMouseY = e.clientY;
			angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3;
			angleY += (curMouseY - lastMouseY + lastAngleY - angleY) * 0.3;
			angleY = Math.max(-60, Math.min(60, angleY));
	
			console.log(angleY);
			wrap.style.transform = "rotateX(" + angleY + "deg)";
			wrap.style.transform = "rotateY(" + angleX + "deg)";
		}

求大牛指导代码的含义,小白实在是看不懂,重点是下面两句话

angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3;
			angleY += (curMouseY - lastMouseY + lastAngleY - angleY) * 0.3;

不胜感激!

刚毅87

浏览 1820回答 1

1回答

KXFT

angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3就是angleX =angleX+ (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3啊，就是一个简便写法

0 0

随时随地看视频慕课网APP