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

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

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

点此查看实例展示

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

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

HTML结构:

  <div class="pop_see_360pic" id="popseebox">   <div class="pic_box">    <div class="loading" id="pic360load">Loading...</div>    <div class="pic_box_inner" id="pic_box_inner">     <img src="" />    </div>    <a href="void(0)" class="prev_arrow" id="prev"><span>←</span></a>    <a href="void(0)" class="pause_arrow" id="pause"><span>‖</span></a>    <a href="void(0)" class="next_arrow" id="next"><span>→</span></a>   </div>   <div class="pic_list">    <ul id="picListItem">     <li><a href="void(0)" class="sel">Standard Room</a></li>     <li><a href="void(0)">Sea view Room (PVSU1)</a></li>     <li><a href="void(0)">Royale Suite</a></li>     <li><a href="void(0)">Bella Suite</a></li>     <li><a href="void(0)">11Royale Suite (PVSU1)</a></li>     <li><a href="void(0)">Royale Suite</a></li>     <li><a href="void(0)">Bella Suite</a></li>     <li><a href="void(0)">Royale Suite (PVSU1)</a></li>    </ul>   </div>   <a href="void(0)" class="mbtn mbtn-mini" id="close">X</a>  </div>

CSS样式:

*{margin:0; padding:0;} li{list-style: none; } body{font-size:11px;} a{text-decoration: none;} .pop_see_360pic:after {clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;} .pop_see_360pic {position:relative;float:left;width:550px;padding:14px 70px 14px 71px;border:1px solid #CECECE;background-color:#FFFFFF;zoom:1;} .pop_see_360pic_fla {width:650px;padding:20px 40px 14px 0;} .pop_see_360pic .mbtn {position:absolute;top:12px;right:20px;} .pop_see_360pic .pic_box {position:relative;float:left;width:320px;height:240px;overflow:hidden;margin-right:10px;} .pop_see_360pic .pic_box img {display:block;width:320px;height:240px;} .pop_see_360pic .pic_list {float:left;width:220px;height:240px;overflow-x:hidden;overflow-y:auto;} .pop_see_360pic .pic_list ul {overflow:hidden;width:218px;border:1px solid #CECECE;border-bottom:0 none;} .pop_see_360pic .pic_list li {float:left;width:218px;height:35px;font-weight:bold;border-bottom:1px solid #CECECE;} .pop_see_360pic .pic_list li a {display:block;width:100%;height:18px;overflow:hidden;padding:9px 10px 8px 10px;zoom:1;} .pop_see_360pic .pic_list li a:hover {text-decoration:none;background-color:#EFF0F1;} .pop_see_360pic .pic_list li a.sel, .pop_see_360pic .pic_list li a.sel:hover {text-decoration:none;background-color:#C1D3F1;} .pop_see_360pic .prev_arrow, .pop_see_360pic .pause_arrow, .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;} :root .pop_see_360pic .prev_arrow, :root .pop_see_360pic .pause_arrow, :root .pop_see_360pic .next_arrow {filter:none;} .pop_see_360pic .prev_arrow {left:53px;border-radius:10px 0 0 0;} .pop_see_360pic .next_arrow {left:195px;border-radius:0 10px 0 0;} .pop_see_360pic .prev_arrow:hover, .pop_see_360pic .pause_arrow:hover, .pop_see_360pic .next_arrow:hover {font-size:11px;} .pop_see_360pic .pic_box img {width: auto;height: 240px;} .pop_see_360pic{margin:10px;} .pop_see_360pic .loading{position: absolute; top:0; left:0; background:#ebebeb url(http://www.daqianduan.com/wp-content/uploads/2012/12/loading_50_g.gif) no-repeat 134px 78px; width: 320px; height:240px; z-index:998; text-indent: -999px;} .pic_box_inner{position:absolute; width:5000px; overflow: hidden; *zoom:1;} .pic_box_inner img{float:left;}

javascript:

window.onload = function(){ var pic360play = function(){this.initialize()}  pic360play.prototype = {  initialize : function(){   var oThis = this;    this.popseebox = document.getElementById("popseebox");   this.pic360load = document.getElementById("pic360load");    this.oPrev = document.getElementById("prev");   this.opause = document.getElementById("pause");   this.oNext = document.getElementById("next");    this.timeout = 0;   this.picList = document.getElementById("picListItem");   this.oScrollIner = document.getElementById("pic_box_inner");   this.oScrollBox = this.oScrollIner.parentNode;   this.oScrollImg = this.oScrollBox.getElementsByTagName("img")[0];    /* ============= copy img for scrool no space =========== */   this.oScrollImgcopy = this.oScrollImg.cloneNode(true);   this.oScrollIner.appendChild(this.oScrollImgcopy);    /* =========== bind close pic360play popup event ========== */   document.getElementById("close").onclick = function(){    oThis.close(popseebox);   }    /* ============== reset first img and layout ===============*/   oThis.resetImg();    /* ============== give per link tabs pic =================*/   oThis.picList.onclick = function(e) {    e = window.event ? window.event : e;    var who = e.target ? e.target : e.srcElement;    if(who.nodeType == 1 && who.tagName == "A" && who.getAttribute("imgurl") && oThis.oScrollImgcopy.src != who.getAttribute("imgurl")){     oThis.pic360load.style.display = "block";     var newimg = new Image();     newimg.src = who.getAttribute("imgurl");     newimg.onload = function(){      oThis.oScrollImg.src = oThis.oScrollImgcopy.src = who.getAttribute("imgurl");       oThis.oScrollImg = oThis.oScrollBox.getElementsByTagName("img")[0];       oThis.oScrollImgcopy = oThis.oScrollBox.getElementsByTagName("img")[1];       oThis.pic360load.style.display = "none";       clearTimeout(oThis.timeout);       oThis.resetMiddle();       oThis.timeout = setInterval(function(){        oThis.prev(oThis);       },16);      }      return false;    }   };    /* ============ play pic ============= */     this.oPrev.onclick = function(){     clearTimeout(oThis.timeout);     oThis.timeout = setInterval(function(){      oThis.prev();     },16);    }     this.oNext.onclick = function(){     clearTimeout(oThis.timeout);     oThis.timeout = setInterval(function(){      oThis.next();     },16);     }     this.opause.onclick = function(){     clearTimeout(oThis.timeout);    }  },  getStyle : function(elem,name){   if(elem.style[name]){   return elem.style[name];   }   else if(elem.currentStyle){    return elem.currentStyle[name];   }   else if(document.defaultView && document.defaultView.getComputedStyle){    name = name.replace(/[A-Z]/g,"-$1");    name = name.toLowerCase();    var s = document.defaultView.getComputedStyle(elem,'');    return s && s.getPropertyValue(name);   }   return null;  },  prev : function(){   if(parseFloat(this.oScrollIner.style.left)  parseFloat(this.getStyle(this.oScrollBox,"width")) - this.oScrollImg.width)     this.oScrollIner.style.left =  parseFloat(this.oScrollIner.style.left) - this.oScrollImg.width + "px";    this.oScrollIner.style.left = parseFloat(this.oScrollIner.style.left) + 1 + "px";  },  close : function(obj){   obj.style.display = "none";    return false;  },  resetImg : function(){   var picListItemLink = this.picList.getElementsByTagName("a");   var oThis = this;   oThis.oScrollImg.src = oThis.oScrollImgcopy.src = picListItemLink[1].getAttribute("imgurl");   var resetImg = new Image();   resetImg.src= picListItemLink[1].getAttribute("imgurl");    resetImg.onload = function(){    //reset img location middle    oThis.resetMiddle();     oThis.pic360load.style.display = "none";     oThis.timeout = setInterval(function(){     oThis.prev(oThis);    },16);   }  },  resetMiddle: function(){   this.oScrollIner.style.left = - (this.oScrollImg.width/2 - parseFloat(this.getStyle(this.oScrollBox,"width"))/2) + "px";     } }  new pic360play();  }

点此查看实例展示

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到