<!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)";
}求大牛指導(dǎo)代碼的含義,小白實(shí)在是看不懂,重點(diǎn)是下面兩句話angleX?+=?(curMouseX?-?lastMouseX?+?lastAngleX?-?angleX)?*?0.3;
angleY?+=?(curMouseY?-?lastMouseY?+?lastAngleY?-?angleY)?*?0.3;不勝感激!
求大牛指導(dǎo)代碼的含義
剛毅87
2016-07-26 21:51:07
