移动端全景装修图的实现实例分享
导读:收集整理的这篇文章主要介绍了移动端全景装修图的实现实例分享,觉得挺不错的,现在分享给大家,也给大家做个参考。移动端全景装修图的实现实例分享<!DOCTYPE htML><html lang="en"><head...
收集整理的这篇文章主要介绍了移动端全景装修图的实现实例分享,觉得挺不错的,现在分享给大家,也给大家做个参考。移动端全景装修图的实现实例分享!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.dis@R_360_2266@ = "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>
以上就是移动端全景装修图的实现实例分享的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 移动端全景装修图的实现实例分享
本文地址: https://pptw.com/jishu/583543.html