UDN-企业互联网技术人气社区
UDN 企业互联网技术社区 前端精选 JavaScript精选 JavaScript实现360度全景图片展示效果

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

王许柔 论坛 2016-4-27 15:15
分享到:
摘要: 全景拍摄:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片。它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接。现在的智能手机也基本带这个功能。 ...
  360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果,改变了普通图片平淡的特点,让人们在网上能够进行 360 度全视角观察,而且通过交互操作,可以实现自由浏览,从而震撼的视觉效果。

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

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

  HTML结构:
  1. <div class="pop_see_360pic" style="" 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="JavaScript:void(0)" class="prev_arrow" id="prev"><span>←</span></a> <a href="JavaScript:void(0)" class="pause_arrow" id="pause"><span>‖</span></a> <a href="JavaScript:void(0)" class="next_arrow" id="next"><span>→</span></a>
  8.                 </div>
  9.                 <div class="pic_list">
  10.                         <ul id="picListItem">
  11.                                 <li><a href="JavaScript:void(0)" class="sel">Standard Room</a></li>
  12.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_1.jpg">Sea view Room (PVSU1)</a></li>
  13.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_2.jpg">Royale Suite</a></li>
  14.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_3.jpg">Bella Suite</a></li>
  15.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_4.jpg">11Royale Suite (PVSU1)</a></li>
  16.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_5.jpg">Royale Suite</a></li>
  17.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_6.jpg">Bella Suite</a></li>
  18.                                 <li><a href="JavaScript:void(0)" imgurl="http://ued.ctrip.com/blog/wp-content/uploads/2012/12/hotel_7.jpg">Royale Suite (PVSU1)</a></li>
  19.                         </ul>
  20.                 </div>
  21.                 <a href="JavaScript:void(0)" class="mbtn mbtn-mini" id="close">X</a>
  22.         </div>
复制代码

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

  JavaScript:
  1. var pic360play = function(){this.initialize()}

  2. pic360play.prototype = {
  3.         initialize : function(){
  4.                 var oThis = this;

  5.                 this.popseebox = document.getElementById("popseebox");
  6.                 this.pic360load = document.getElementById("pic360load");

  7.                 this.oPrev = document.getElementById("prev");
  8.                 this.opause = document.getElementById("pause");
  9.                 this.oNext = document.getElementById("next");

  10.                 this.timeout = 0;
  11.                 this.picList = document.getElementById("picListItem");
  12.                 this.oScrollIner = document.getElementById("pic_box_inner");
  13.                 this.oScrollBox = this.oScrollIner.parentNode;
  14.                 this.oScrollImg = this.oScrollBox.getElementsByTagName("img")[0];

  15.                 /* ============= copy img for scrool no space =========== */
  16.                 this.oScrollImgcopy = this.oScrollImg.cloneNode(true);
  17.                 this.oScrollIner.appendChild(this.oScrollImgcopy);

  18.                 /* =========== bind close pic360play popup event ========== */
  19.                 document.getElementById("close").onclick = function(){
  20.                         oThis.close(popseebox);
  21.                 }

  22.                 /* ============== reset first img and layout ===============*/
  23.                 oThis.resetImg();

  24.                 /* ============== give per link tabs pic =================*/
  25.                 oThis.picList.onclick = function(e) {
  26.                         e = window.event ? window.event : e;
  27.                         var who = e.target ? e.target : e.srcElement;
  28.                         if(who.nodeType == 1 && who.tagName == "A" && who.getAttribute("imgurl") && oThis.oScrollImgcopy.src != who.getAttribute("imgurl")){
  29.                                 oThis.pic360load.style.display = "block";
  30.                                 var newimg = new Image();
  31.                                 newimg.src = who.getAttribute("imgurl");
  32.                                 newimg.onload = function(){
  33.                                         oThis.oScrollImg.src = oThis.oScrollImgcopy.src = who.getAttribute("imgurl");
  34.                                                 oThis.oScrollImg = oThis.oScrollBox.getElementsByTagName("img")[0];
  35.                                                 oThis.oScrollImgcopy = oThis.oScrollBox.getElementsByTagName("img")[1];
  36.                                                 oThis.pic360load.style.display = "none";
  37.                                                 clearTimeout(oThis.timeout);
  38.                                                 oThis.resetMiddle();
  39.                                                 oThis.timeout = setInterval(function(){
  40.                                                         oThis.prev(oThis);
  41.                                                 },16);

  42.                                 }

  43.                                 return false;
  44.                         }
  45.                 };
  46.                 /* ============ play pic ============= */
  47.                  this.oPrev.onclick = function(){
  48.                          clearTimeout(oThis.timeout);
  49.                          oThis.timeout = setInterval(function(){
  50.                                  oThis.prev();
  51.                          },16);
  52.                  }

  53.                  this.oNext.onclick = function(){
  54.                          clearTimeout(oThis.timeout);
  55.                          oThis.timeout = setInterval(function(){
  56.                                  oThis.next();
  57.                          },16);

  58.                  }

  59.                  this.opause.onclick = function(){
  60.                          clearTimeout(oThis.timeout);
  61.                  }
  62.         },
  63.         getStyle : function(elem,name){
  64.                 if(elem.style[name]){
  65.                 return elem.style[name];
  66.                 }
  67.                 else if(elem.currentStyle){
  68.                         return elem.currentStyle[name];
  69.                 }
  70.                 else if(document.defaultView && document.defaultView.getComputedStyle){
  71.                         name = name.replace(/[A-Z]/g,"-$1");
  72.                         name = name.toLowerCase();
  73.                         var s = document.defaultView.getComputedStyle(elem,'');
  74.                         return s && s.getPropertyValue(name);
  75.                 }
  76.                 return null;
  77.         },
  78.         prev : function(){
  79.                 if(parseFloat(this.oScrollIner.style.left) < -(this.oScrollImg.width + parseFloat(this.getStyle(this.oScrollBox,"width"))) ){
  80.                         this.oScrollIner.style.left = parseFloat(this.oScrollIner.style.left) + this.oScrollImg.width + "px";
  81.                 }
  82.                 this.oScrollIner.style.left = parseFloat(this.oScrollIner.style.left) - 1 + "px";

  83.         },
  84.         opause : function(){
  85.                 clearTimeout(this.timeout);
  86.         },
  87.         next : function(){
  88.                 if(parseFloat(this.oScrollIner.style.left) > parseFloat(this.getStyle(this.oScrollBox,"width")) - this.oScrollImg.width)
  89.                          this.oScrollIner.style.left =  parseFloat(this.oScrollIner.style.left) - this.oScrollImg.width + "px";
  90.                  this.oScrollIner.style.left = parseFloat(this.oScrollIner.style.left) + 1 + "px";
  91.         },
  92.         close : function(obj){
  93.                 obj.style.display = "none";
  94.                         return false;
  95.         },
  96.         resetImg : function(){
  97.                 var picListItemLink = this.picList.getElementsByTagName("a");
  98.                 var oThis = this;
  99.                 oThis.oScrollImg.src = oThis.oScrollImgcopy.src = picListItemLink[1].getAttribute("imgurl");
  100.                 var resetImg = new Image();
  101.                 resetImg.src= picListItemLink[1].getAttribute("imgurl");

  102.                 resetImg.onload = function(){
  103.                         //reset img location middle
  104.                         oThis.resetMiddle();

  105.                         oThis.pic360load.style.display = "none";

  106.                         oThis.timeout = setInterval(function(){
  107.                                 oThis.prev(oThis);
  108.                         },16);
  109.                 }
  110.         },
  111.         resetMiddle: function(){
  112.                 this.oScrollIner.style.left = - (this.oScrollImg.width/2 - parseFloat(this.getStyle(this.oScrollBox,"width"))/2) + "px";
  113.         }
  114. }

  115. new pic360play();
复制代码

相关阅读

分享到:
已有3条评论

最新评论

爆炸VIP
js框架越来越火了, 不过本人还是喜欢原生的好, 自己写类库, 自己来封装,用着方便。。。。
闫浩
赞一个
我浇余酒洗剑
貌似看过类似的文章恩,排版更清晰点就更好了

一周焦点

关注我们:
关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
返回顶部