读仿淘宝造物节邀请函后感
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>仿淘宝造物节</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<audio id="audio">
<source src="./audio/bgm.mp3" type="audio/mpeg" />
</audio>
<div id="container" class="container">
<div id='box'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div style="position:relative;z-index: 1000;width: 100%;height: 60px;text-align: right;" id="music">
<div style="width: 60px;text-align: right;position: absolute;right: 0">
stop
</div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="index.js"></script>
</body>
</html>
css代码(里面.container设置的宽高为图片宽高，最重要的是perspective: 25rem;)
div{
margin:0;
padding:0;
}
body{
background-image: url(images/bg.jpg);
}
.container{
margin:0 auto 0 auto;
width: 8.0625rem;
perspective: 25rem;
}
.per{
animation:pers 6s forwards;
-webkit-animation:pers 6s forwards;
}
@keyframes pers{
from{
perspective: 5rem;
}
to{
perspective: 25rem;
}
}
@-webkit-keyframes pers{
from{
perspective: 5rem;
}
to{
perspective: 25rem;
}
}
#box{
-webkit-transform-style:preserve-3d;
-webkit-perspective-origin:50% 50%;
}
#box>div{
position: absolute;
width: 8.0625rem;
height: 73.125rem;
}
js代码
//计算菱柱到边的距离
CalculateRadius = function(r, per) {
return Math.round(r / Math.tan(Math.PI / per) / 2) - 3;
}
//菱柱的半径(20个边，围成一个很接近的圆，当边越多，钝角就越大，此时就接近圆)
var radius = CalculateRadius(129, 20);
var box = document.getElementById("box");
var audio = document.getElementById('audio');
var arr = document.getElementById('box').getElementsByTagName('div');
for (var i = 0; i < arr.length; i++) {
arr[i].style.background = 'url(images/p' + (i + 1) + '.png) no-repeat';
arr[i].style.WebkitTransform = 'rotateY(' + 360 / 20 * i + 'deg)' + ' translateZ(' + radius + 'px)';
}
//为了一开始进入有个由远到近的视觉差，直接写在.container中在手机浏览器中不生效
setTimeout(function() {
$("#container").addClass('per');
})
var startX = 0,
x = 0,
endX = 0;
//防止手机转动时再触发touchstart事件
var flag = true;
$("#box").on('touchstart', function(event) {
event.preventDefault();
//触碰点横坐标
var touch = event.targetTouches[0];
startX = touch.pageX - x;
});
$('#box').on('touchend', function(event) {
event.preventDefault();
});
$("#box").on('touchmove', function(event) {
event.preventDefault();
if (flag) {
var touch = event.targetTouches[0];
endX = touch.pageX;
x = endX - startX;
box.style.transform = 'rotateY(' + x + 'deg)';
} else {
return false;
}
});
window.addEventListener('deviceorientation', _.throttle(function(event) {
var gamma = event.gamma;
if (Math.abs(gamma) > 1) {
flag = false;
box.style.transform = 'rotateY(' + (gamma*4 + x) + 'deg)';
// x += gamma;
} else {
flag = true;
}
}, 16));
$("#music").on('click', function() {
if (audio.paused) {
audio.play();
$(this).text('play');
} else {
audio.pause();
$(this).text('stop');
}
});
DeviceOrientation事件规范
- deviceorientation,其提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
- devicemotion，其提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。
- compassneedscalibration，其用于通知Web站点使用罗盘信息校准上述事件。
下列代码展示了这些事件的使用方法：
以设备坐标系z轴为轴，旋转alpha度。alpha的作用域为[0, 360)。
以设备坐标系x轴为轴，旋转beta度。beta的作用域为[-180, 180)。
已设备坐标系y轴为轴，旋转gamma度。gamma的作用域为[-90, 90)。
注册一个deviceorientation事件的接收器：
window.addEventListener("deviceorientation", function(event) {
// 处理event.alpha、event.beta及event.gamma
}, true);
只用自定义界面通知用户校准罗盘：
window.addEventListener("compassneedscalibration", function(event) {
alert('您的罗盘需要校准，请将设备沿数字8方向移动。');
event.preventDefault();
}, true);
注册一个devicemotion时间的接收器：
window.addEventListener("devicemotion", function(event) {
// 处理event.acceleration、event.accelerationIncludingGravity、
// event.rotationRate和event.interval
}, true);
应用案例(摇一摇事件监听)
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
//简单的摇一摇触发代码
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}
参考文档：
