<!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;不胜感激!
1 回答
已采纳
KXFT
TA贡献113条经验 获得超58个赞
angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3就是angleX =angleX+ (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3啊，就是一个简便写法
添加回答
举报
0/150
提交
取消