1. 首页
  2. 技术
  3. 前端

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

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

2012-12-21
分类:JavaScript
阅读(81668)
评论(35)

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

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

点此查看实例展示

这个小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(https://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();

}

点此查看实例展示

AD:
【专业网站开发】
7年网站开发经验 / 高端大气用户体验 / 全设备自适应兼容 / 免费靠谱工单售后
赞(2) 未经允许不得转载:
大前端 »
JavaScript实现360度全景图片展示效果
分享到:








更多
(
0
) 标签:
JavaScript
图片展示
JavaScript实现360度全景图片展示效果

lyushine

这家伙很懒,什么也没留下~
cocss博客
新浪微博
腾讯微博
上一篇
京东商城UED招聘前端开发

下一篇
大前端投稿功能上线 来发你的文章吧

相关推荐

评论 35

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

取消

有人回复时邮件通知我

提交评论

  • 昵称昵称 (必填)
  • 邮箱邮箱 (必填)
  • 网址网址
  1. #30 JavaScript实现360度全景图片展示效果

    图片是不是挂了?

    缙哥哥6个月前 (02-28) 回复

  2. #29 JavaScript实现360度全景图片展示效果

    很不错的教程

    bilee3年前 (2015-10-06) 回复

  3. #28 JavaScript实现360度全景图片展示效果

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

    Daniel4年前 (2014-05-10) 回复

  4. #27 JavaScript实现360度全景图片展示效果

    效果很一般嘛

    jqueryfuns5年前 (2014-02-10) 回复

  5. #26 JavaScript实现360度全景图片展示效果

    想找你定制主题 咋联系?

    ljz20465年前 (2013-12-30) 回复

  6. #25 JavaScript实现360度全景图片展示效果

    ljz20465年前 (2013-12-30) 回复

  7. #24 JavaScript实现360度全景图片展示效果

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

    Yestin5年前 (2013-12-01) 回复

  8. #23 JavaScript实现360度全景图片展示效果

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

    野草5年前 (2013-10-25) 回复

  9. #22 JavaScript实现360度全景图片展示效果

    这个不就是无缝滚动咩?

    hello_potato5年前 (2013-10-09) 回复

  10. #21 JavaScript实现360度全景图片展示效果

    不错

    fcwrwqt5年前 (2013-07-23) 回复

  11. #20 JavaScript实现360度全景图片展示效果

    好东西收藏!

    小雨5年前 (2013-07-10) 回复

  12. #19 JavaScript实现360度全景图片展示效果

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

    Uncle.E5年前 (2013-06-22) 回复

  13. #18 JavaScript实现360度全景图片展示效果

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

    hicoogle5年前 (2013-05-06) 回复

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

      很多相机和手机都有了,iphone全景

      浩子5年前 (2013-05-09) 回复

  14. #17 JavaScript实现360度全景图片展示效果

    不错这个效果很炫

    wordpress教程网5年前 (2013-04-04) 回复

  15. #16 JavaScript实现360度全景图片展示效果

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

    三藏5年前 (2013-04-03) 回复

  16. #15 JavaScript实现360度全景图片展示效果

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

    黄聪5年前 (2013-03-24) 回复

  17. #14 JavaScript实现360度全景图片展示效果

    243424

    ckken6年前 (2013-03-14) 回复

  18. #13 JavaScript实现360度全景图片展示效果

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

    bbis6年前 (2013-02-24) 回复

  19. #12 JavaScript实现360度全景图片展示效果

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

    bbis6年前 (2013-02-24) 回复

  20. #11 JavaScript实现360度全景图片展示效果

    厉害,这效果很炫

    wordpress教程网6年前 (2013-02-06) 回复

  21. #10 JavaScript实现360度全景图片展示效果

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

    厦门SEO6年前 (2013-01-31) 回复

  22. #9 JavaScript实现360度全景图片展示效果

    谢谢代码啊

    鲜活优惠码6年前 (2013-01-10) 回复

  23. #8 JavaScript实现360度全景图片展示效果

    测试评论。。。。。

    ceshipinglun6年前 (2013-01-06) 回复

  24. #7 JavaScript实现360度全景图片展示效果

    来学习了!

    YY6年前 (2012-12-24) 回复

  25. #6 JavaScript实现360度全景图片展示效果

    好强大!学习学习了

    阿伟6年前 (2012-12-23) 回复

  26. #5 JavaScript实现360度全景图片展示效果

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

    水中月明6年前 (2012-12-22) 回复

  27. #4 JavaScript实现360度全景图片展示效果

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

    编程路上6年前 (2012-12-21) 回复

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

      浩子是全能王!!!十项全能冠军! :mrgreen:

      宇轩6年前 (2012-12-23) 回复

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

      前段不会写JS那还叫什么前端哦?

      野草5年前 (2013-10-25) 回复

  28. #3 JavaScript实现360度全景图片展示效果

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

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

  29. #2 JavaScript实现360度全景图片展示效果

    这个效果不错~

    子痕6年前 (2012-12-21) 回复

  30. #1 JavaScript实现360度全景图片展示效果

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

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

原创文章,作者:lyushine,如若转载,请注明出处:https://www.zengqueling.com/javascript%e5%ae%9e%e7%8e%b0360%e5%ba%a6%e5%85%a8%e6%99%af%e5%9b%be%e7%89%87%e5%b1%95%e7%a4%ba%e6%95%88%e6%9e%9c/

联系我们

15602395067

在线咨询:点击这里给我发消息

邮件:eden7@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code