JavaScript实现360度全景图片展示效果

导语 360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果,改变了普通图片平淡的特点,让人们在网上能够进行 360 度全视角观察,而且通过交互操作,可以实现
360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果,改变了普通图片平淡的特点,让人们在网上能够进行 360 度全视角观察,而且通过交互操作,可以实现自由浏览,从而震撼的视觉效果。

全景照片:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片。它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接。现在的智能手机也基本带这个功能。

这个小DEMO基于全景照片的左右边缘较为接近且适宜自动拼接与jser熟知的无缝滚动原理。下面这个图片就是本DEMO实现原理的简化图。

博学谷

HTML结构:

  1. <div class="pop_see_360pic" id="popseebox"> 
  2.     <div class="pic_box"> 
  3.         <div class="loading" id="pic360load">Loading...div> 
  4.         <div class="pic_box_inner" id="pic_box_inner"> 
  5.             <img src="" /> 
  6.         div> 
  7.         <a href="void(0)" class="prev_arrow" id="prev"><span>span>a> 
  8.         <a href="void(0)" class="pause_arrow" id="pause"><span>span>a> 
  9.         <a href="void(0)" class="next_arrow" id="next"><span>span>a> 
  10.     div> 
  11.     <div class="pic_list"> 
  12.         <ul id="picListItem"> 
  13.             <li><a href="void(0)" class="sel">Standard Rooma>li> 
  14.             <li><a href="void(0)">Sea view Room (PVSU1)a>li> 
  15.             <li><a href="void(0)">Royale Suitea>li> 
  16.             <li><a href="void(0)">Bella Suitea>li> 
  17.             <li><a href="void(0)">11Royale Suite (PVSU1)a>li> 
  18.             <li><a href="void(0)">Royale Suitea>li> 
  19.             <li><a href="void(0)">Bella Suitea>li> 
  20.             <li><a href="void(0)">Royale Suite (PVSU1)a>li> 
  21.         ul> 
  22.     div> 
  23.     <a href="void(0)" class="mbtn mbtn-mini" id="close">Xa> 
  24. div> 


CSS样式:

  1. *{margin:0padding:0;} 
  2. li{list-stylenone; } 
  3. body{font-size:11px;} 
  4. a{text-decorationnone;} 
  5. .pop_see_360pic:after {clear:both;display:block;content:".";height:0;
  6. visibility:hidden;font-size:0;line-height:0;} 
  7. .pop_see_360pic {position:relative;float:left;width:550px;
  8. padding:14px 70px 14px 71px;border:1px solid #CECECE;background-color:#FFFFFF;zoom:1;} 
  9. .pop_see_360pic_fla {width:650px;padding:20px 40px 14px 0;} 
  10. .pop_see_360pic .mbtn {position:absolute;top:12px;right:20px;} 
  11. .pop_see_360pic .pic_box {position:relative;float:left;width:320px;
  12. height:240px;overflow:hidden;margin-right:10px;} 
  13. .pop_see_360pic .pic_box img {display:block;width:320px;height:240px;} 
  14. .pop_see_360pic .pic_list {float:left;width:220px;height:240px;
  15. overflow-x:hidden;overflow-y:auto;} 
  16. .pop_see_360pic .pic_list ul {overflow:hidden;width:218px;
  17. border:1px solid #CECECE;border-bottom:0 none;} 
  18. .pop_see_360pic .pic_list li {float:left;width:218px;height:35px;
  19. font-weight:bold;border-bottom:1px solid #CECECE;} 
  20. .pop_see_360pic .pic_list li a {display:block;width:100%;
  21. height:18px;overflow:hidden;padding:9px 10px 8px 10px;zoom:1;} 
  22. .pop_see_360pic .pic_list li a:hover {text-decoration:none;
  23. background-color:#EFF0F1;} 
  24. .pop_see_360pic .pic_list li a.sel, 
  25. .pop_see_360pic .pic_list li a.sel:hover {text-decoration:none;
  26. background-color:#C1D3F1;} 
  27. .pop_see_360pic .prev_arrow, 
  28. .pop_see_360pic .pause_arrow, 
  29. .pop_see_360pic .next_arrow {position:absolute;left:124px;bottom:0;
  30. width:70px;height:27px;overflow:hidden;padding-top:17px;
  31. text-align:center;font-size:12px;filter:progid:
  32. DXImageTransform.Microsoft.gradient(enabled='true',
  33. startColorstr='#7FFFFFFF', endColorstr='#7FFFFFFF');
  34. background:url(about:blank);background:rgba(255,255,255,0.5);z-index:9;} 
  35. :root .pop_see_360pic .prev_arrow, 
  36. :root .pop_see_360pic .pause_arrow, 
  37. :root .pop_see_360pic .next_arrow {filter:none;} 
  38. .pop_see_360pic .prev_arrow {left:53px;border-radius:10px 0 0 0;} 
  39. .pop_see_360pic .next_arrow {left:195px;border-radius:0 10px 0 0;} 
  40. .pop_see_360pic .prev_arrow:hover, 
  41. .pop_see_360pic .pause_arrow:hover, 
  42. .pop_see_360pic .next_arrow:hover {font-size:11px;} 
  43. .pop_see_360pic .pic_box img {widthauto;height240px;} 
  44. .pop_see_360pic{margin:10px;} 
  45. .pop_see_360pic .loading{positionabsolute; top:0; left:0
  46. background:#ebebeb url(https://www.daqianduan.com/wp-content/uploads/2012/12/loading_50_g.gif) 
  47. no-repeat 134px 78pxwidth320pxheight:240pxz-index:998
  48. text-indent-999px;} 
  49. .pic_box_inner{position:absolutewidth:5000pxoverflowhidden; *zoom:1;} 
  50. .pic_box_inner img{float:left;} 

 

javascript

  1. window.onload = function(){ 
  2. var pic360play = function(){this.initialize()} 
  3.  
  4. pic360play.prototype = { 
  5.     initialize : function(){ 
  6.         var oThis = this
  7.  
  8.         this.popseebox = document.getElementById("popseebox"); 
  9.         this.pic360load = document.getElementById("pic360load"); 
  10.  
  11.         this.oPrev = document.getElementById("prev"); 
  12.         this.opause = document.getElementById("pause"); 
  13.         this.oNext = document.getElementById("next"); 
  14.  
  15.         this.timeout = 0; 
  16.         this.picList = document.getElementById("picListItem"); 
  17.         this.oScrollIner = document.getElementById("pic_box_inner"); 
  18.         this.oScrollBox = this.oScrollIner.parentNode; 
  19.         this.oScrollImg = this.oScrollBox.getElementsByTagName("img")[0]; 
  20.  
  21.         /* ============= copy img for scrool no space =========== */ 
  22.         this.oScrollImgcopy = this.oScrollImg.cloneNode(true); 
  23.         this.oScrollIner.appendChild(this.oScrollImgcopy); 
  24.  
  25.         /* =========== bind close pic360play popup event ========== */ 
  26.         document.getElementById("close").onclick = function(){ 
  27.             oThis.close(popseebox); 
  28.         } 
  29.  
  30.         /* ============== reset first img and layout ===============*/ 
  31.         oThis.resetImg(); 
  32.  
  33.         /* ============== give per link tabs pic =================*/ 
  34.         oThis.picList.onclick = function(e) { 
  35.             e = window.event ? window.event : e; 
  36.             var who = e.target ? e.target : e.srcElement; 
  37.             if(who.nodeType == 1 && who.tagName == "A" 
  38. && who.getAttribute("imgurl") && oThis.oScrollImgcopy.src 
  39. != who.getAttribute("imgurl")){ 
  40.                 oThis.pic360load.style.display = "block"
  41.                 var newimg = new Image(); 
  42.                 newimg.src = who.getAttribute("imgurl"); 
  43.                 newimg.onload = function(){ 
  44.                     oThis.oScrollImg.src = oThis.oScrollImgcopy.src = 
  45. who.getAttribute("imgurl"); 
  46.                         oThis.oScrollImg = oThis.oScrollBox
  47. .getElementsByTagName("img")[0]; 
  48.                         oThis.oScrollImgcopy = oThis.oScrollBox
  49. .getElementsByTagName("img")[1]; 
  50.                         oThis.pic360load.style.display = "none"
  51.                         clearTimeout(oThis.timeout); 
  52.                         oThis.resetMiddle(); 
  53.                         oThis.timeout = setInterval(function(){ 
  54.                             oThis.prev(oThis); 
  55.                         },16); 
  56.  
  57.                 } 
  58.  
  59.                 return false
  60.             } 
  61.         };   
  62.         /* ============ play pic ============= */  
  63.          this.oPrev.onclick = function(){ 
  64.             clearTimeout(oThis.timeout); 
  65.             oThis.timeout = setInterval(function(){ 
  66.                 oThis.prev(); 
  67.             },16); 
  68.          } 
  69.  
  70.          this.oNext.onclick = function(){ 
  71.             clearTimeout(oThis.timeout); 
  72.             oThis.timeout = setInterval(function(){ 
  73.                 oThis.next(); 
  74.             },16); 
  75.  
  76.          } 
  77.  
  78.          this.opause.onclick = function(){ 
  79.             clearTimeout(oThis.timeout); 
  80.          } 
  81.     }, 
  82.     getStyle : function(elem,name){ 
  83.         if(elem.style[name]){ 
  84.         return elem.style[name]; 
  85.         } 
  86.         else if(elem.currentStyle){ 
  87.             return elem.currentStyle[name]; 
  88.         } 
  89.         else if(document.defaultView && document.defaultView.getComputedStyle){ 
  90.             name = name.replace(/[A-Z]/g,"-$1"); 
  91.             name = name.toLowerCase(); 
  92.             var s = document.defaultView.getComputedStyle(elem,''); 
  93.             return s && s.getPropertyValue(name); 
  94.         } 
  95.         return null
  96.     }, 
  97.     prev : function(){ 
  98.         if(parseFloat(this.oScrollIner.style.left)  
  99. parseFloat(this.getStyle(this.oScrollBox,"width")) 
  100. this.oScrollImg.width) 
  101.             this.oScrollIner.style.left =  parseFloat(this.oScrollIner.style.left) 
  102. this.oScrollImg.width + "px"
  103.          this.oScrollIner.style.left = parseFloat(this.oScrollIner.style.left) 
  104. + 1 + "px"
  105.     }, 
  106.     close : function(obj){ 
  107.         obj.style.display = "none"
  108.             return false
  109.     }, 
  110.     resetImg : function(){ 
  111.         var picListItemLink = this.picList.getElementsByTagName("a"); 
  112.         var oThis = this
  113.         oThis.oScrollImg.src = oThis.oScrollImgcopy.src
  114.  = picListItemLink[1].getAttribute("imgurl"); 
  115.         var resetImg = new Image(); 
  116.         resetImg.src= picListItemLink[1].getAttribute("imgurl"); 
  117.  
  118.         resetImg.onload = function(){ 
  119.             //reset img location middle 
  120.             oThis.resetMiddle(); 
  121.  
  122.             oThis.pic360load.style.display = "none"
  123.  
  124.             oThis.timeout = setInterval(function(){ 
  125.                 oThis.prev(oThis); 
  126.             },16); 
  127.         } 
  128.     }, 
  129.     resetMiddle: function(){ 
  130.         this.oScrollIner.style.left = - 
  131. (this.oScrollImg.width/2 - parseFloat(this.getStyle(this.oScrollBox,"width"))/2)
  132.  + "px";             
  133.     } 
  134.  
  135. new pic360play(); 
  136.  

 

https://www.nucmc.com/ true JavaScript实现360度全景图片展示效果 https://www.nucmc.com/show-22-193-1.html report 24493 360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果,改变了普通图片平淡的特点,让人们在网上能够进行 360 度全视角观察,而且通过交互操作,可以实现
TAG:图片展示 效果
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:BETWAY官网网 https://www.nucmc.com/show-22-193-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)