关注前端开发
关注用户体验

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

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

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

点此查看实例展示

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

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();

}

点此查看实例展示

未经允许不得转载:大前端 » JavaScript实现360度全景图片展示效果
分享到:更多 ()

评论 34

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #29

    很不错的教程

    bilee2年前 (2015-10-06)回复
  2. #28

    首先,你得要有一部相机。

    Daniel3年前 (2014-05-10)回复
  3. #27

    效果很一般嘛

    jqueryfuns3年前 (2014-02-10)回复
  4. #26

    想找你定制主题 咋联系?

    ljz20464年前 (2013-12-30)回复
  5. #25

    ljz20464年前 (2013-12-30)回复
  6. #24

    效果不错,就是图片不好找

    Yestin4年前 (2013-12-01)回复
  7. #23

    应该可以支持鼠标拖动和移动设备拖动+惯性算法

    野草4年前 (2013-10-25)回复
  8. #22

    这个不就是无缝滚动咩?

    hello_potato4年前 (2013-10-09)回复
  9. #21

    不错

    fcwrwqt4年前 (2013-07-23)回复
  10. #20

    好东西收藏!

    小雨4年前 (2013-07-10)回复
  11. #19

    :sad: 这个效果够炫~全景图片展展示起来比较困难。这方法不错~

    Uncle.E4年前 (2013-06-22)回复
  12. #18

    这个必需得有一张3D拍摄的相片。

    hicoogle4年前 (2013-05-06)回复
    • 很多相机和手机都有了,iphone全景

      浩子4年前 (2013-05-09)回复
  13. #17

    不错这个效果很炫

    wordpress教程网4年前 (2013-04-04)回复
  14. #16

    这个好像在携程UED上见过,楼主你怎么看??

    三藏4年前 (2013-04-03)回复
  15. #15

    这个功能做装修的网站可以参考

    黄聪4年前 (2013-03-24)回复
  16. #14

    243424

    ckken4年前 (2013-03-14)回复
  17. #13

    看看效果后,真的不错。360度不间断

    bbis4年前 (2013-02-24)回复
  18. #12

    这个和gif比起来,哪个效率高?

    bbis4年前 (2013-02-24)回复
  19. #11

    厉害,这效果很炫

    wordpress教程网4年前 (2013-02-06)回复
  20. #10

    我先去研究一下这代码。估计得小半天,能搞好。

    厦门SEO4年前 (2013-01-31)回复
  21. #9

    谢谢代码啊

    鲜活优惠码5年前 (2013-01-10)回复
  22. #8

    测试评论。。。。。

    ceshipinglun5年前 (2013-01-06)回复
  23. #7

    来学习了!

    YY5年前 (2012-12-24)回复
  24. #6

    好强大!学习学习了

    阿伟5年前 (2012-12-23)回复
  25. #5

    这个要想实现360度的效果,图片得是那种专门制作出来的吧,一般的图片应该不行

    水中月明5年前 (2012-12-22)回复
  26. #4

    如果JS代码是浩子写的,那么浩子不仅是前端攻城师还是一枚优秀的coder啊!

    编程路上5年前 (2012-12-21)回复
    • 浩子是全能王!!!十项全能冠军! :mrgreen:

      宇轩5年前 (2012-12-23)回复
    • 前段不会写JS那还叫什么前端哦?

      野草4年前 (2013-10-25)回复
  27. #3

    这个绝对是好东西,应用到B2C电商网站上比用FLASH实现好的太多,毕竟有很多ipad客户访问。

    Magento5年前 (2012-12-21)回复
  28. #2

    这个效果不错~

    子痕5年前 (2012-12-21)回复
  29. #1

    ❗ 果然很牛。。。好像城市地图一样。。。。

    imxxseo5年前 (2012-12-21)回复

themebetter 国内更好的WordPress主题服务商

立即前往