HTML5技术

每天一个Js小demo之移动端全景图场景实现-全景装修图。主要知识点:css3,旋转角度检测 - catEatBird

字号+ 作者:H5之家 来源:H5之家 2017-07-06 11:05 我要评论( )

!DOCTYPE html html lang="en" head meta content="width=device-width,user-scalable=no" / meta charset="UTF-8" titleDocument/title style type="text/css" body, html { margin: 0; height: 100%; overflow: hidden; position: relative; } .wrap { pos

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,
html {
margin: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.wrap {
position: relative;
height: 100%;
}
.view,
.boxZ,
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation: 36s rotate infinite linear;
animation: 36s rotate infinite linear;
}
.box span {
position: absolute;
left: 50%;
top: 50%;
margin: -512px 0 0 -512px;
width: 1024px;
height: 1024px;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/*
背面,角度和父级的角度相对的面是背景
*/
}
.box span:nth-of-type(1) {
-webkit-transform: rotateY(0deg) translateZ(-510px);
transform: rotateY(0deg) translateZ(-511px);
background: url(img/neg-x.png) no-repeat;
}
.box span:nth-of-type(2) {
-webkit-transform: rotateY(90deg) translateZ(-511px);
transform: rotateY(90deg) translateZ(-511px);
background: url(img/neg-z.png) no-repeat;
}
.box span:nth-of-type(3) {
-webkit-transform: rotateY(180deg) translateZ(-511px);
transform: rotateY(180deg) translateZ(-511px);
background: url(img/pos-x.png) no-repeat;
}
.box span:nth-of-type(4) {
background: url(img/pos-z.png) no-repeat;
-webkit-transform: rotateY(270deg) translateZ(-511px);
transform: rotateY(270deg) translateZ(-511px);
}
.box span:nth-of-type(5) {
background: url(img/pos-y.png);
-webkit-transform: rotateX(-90deg) translateZ(-511px);
transform: rotateX(-90deg) translateZ(-511px);
}
.box span:nth-of-type(6) {
background: url(img/neg-y.png);
-webkit-transform: rotateX(90deg) translateZ(-511px);
transform: rotateX(90deg) translateZ(-511px);
}
/*
transform-origin z轴的设置,在ios下有兼容问题
*/
#loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: #fff url(img/loading.gif) no-repeat center center;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
/* 检测图片加载完成 */
(function(){
var imgData = [
"img/neg-x.png",
"img/neg-y.png",
"img/neg-z.png",
"img/pos-x.png",
"img/pos-y.png",
"img/pos-z.png"
];
var nub = 0;
for(var i = 0; i < imgData.length; i++){
load(imgData[i]);
}
function load(url){
var img = new Image();
img.onload = function(){
nub++;
if(nub == imgData.length){
loading.style.display = "none";
}
};
img.src = url;
}
})();
</script>
<div>
<div>
<div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/m.touch.js"></script>
<script type="text/javascript">
(function(){
setPerspective();
window.addEventListener('resize', function(e) {
setPerspective();
});
function setPerspective(){
var wrap = document.querySelector('.wrap');
var view = document.querySelector('.view');
var boxZ = document.querySelector('.boxZ');
var deg = 45;//视野夹角(角度越小,看到的范围越广,角度越大,看到的范围越少);
var Z = Math.round(Math.tan(deg*Math.PI/180)*wrap.clientHeight/2);//计算景深
wrap.style.perspective = wrap.style.WebKitPerspective = Z + "px";
//距离景物距离不变,那看到的画面大小就不变
css(view,"translateZ",Z);
css(boxZ,"translateZ",-100);
}
})();
(function(){
var box = document.querySelector('.box');
css(box,"rotateX",0);
css(box,"rotateY",0);
window.addEventListener('deviceorientation', function(e) {
var x = e.beta;
var y = e.gamma;
var z = e.alpha;
var rotateX = x - 90;
var rotateY = (y + z)%360;
if(rotateX > 60){
rotateX = 60;
} else if(rotateX <-60){
rotateX = -60;
}
css(box,"rotateX",rotateX);
css(box,"rotateY",-rotateY);
});
})();
//http://antario.act.qq.com/
</script>
</body>
</html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要知识点:事件 - catEatBird

    每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要

    2017-06-24 15:01

  • 每天一个JS 小demo之滑屏幻灯片。主要知识点:event - catEatBird

    每天一个JS 小demo之滑屏幻灯片。主要知识点:event - catEatBird

    2017-06-22 09:00

  • 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery) - 一个自由的出版人

    微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5

    2017-06-20 10:00

  • 微信公众平台网页开发实战--2.从手机相册中选照片然后分享 - 一个自由的出版人

    微信公众平台网页开发实战--2.从手机相册中选照片然后分享 - 一个自

    2017-06-17 11:00

网友点评
t