站長資訊網移動端全景裝修圖的實現實例分享
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" 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 id="loading"></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 class="wrap"> <div class="view"> <div class="boxZ"> <div class="box"> <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?1.1.11"></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); }); })(); // </script> </body> </html>
