
			<p>360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果，改变了普通图片平淡的特点，让人们在网上能够进行 360 度全视角观察，而且通过交互操作，可以实现自由浏览，从而震撼的视觉效果。</p>
<p><strong>全景照片：</strong>所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片。它的基本拍摄原理是搜索两张图片的边缘部分，并将成像效果最为接近的区域加以重合，以完成图片的自动拼接。现在的智能手机也基本带这个功能。</p>
<p><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4878" target="_blank">点此查看实例展示</a></p>
<p>这个小DEMO基于全景照片的左右边缘较为接近且适宜自动拼接与jser熟知的<strong>无缝滚动原理</strong>。下面这个图片就是本DEMO实现原理的简化图。</p>
<p style="text-align: center"><a href="#"><img title="noblankgallery" alt="" src="http://www.daqianduan.com/wp-content/uploads/2012/12/noblankgallery.gif" width="467" height="104" /></a></p>
<p><strong>HTML结构:</strong></p>
<pre style="margin: 15px 0;font: 100 12px/18px monaco, andale mono, courier new;padding: 10px 12px;border: #ccc 1px solid;border-left-width: 4px;background-color: #fefefe;color: #444">  &lt;div class="pop_see_360pic" id="popseebox"&gt;
		&lt;div class="pic_box"&gt;
			&lt;div class="loading" id="pic360load"&gt;Loading...&lt;/div&gt;
			&lt;div class="pic_box_inner" id="pic_box_inner"&gt;
				&lt;img src="" /&gt;
			&lt;/div&gt;
			&lt;a href="void(0)" class="prev_arrow" id="prev"&gt;&lt;span&gt;←&lt;/span&gt;&lt;/a&gt;
			&lt;a href="void(0)" class="pause_arrow" id="pause"&gt;&lt;span&gt;‖&lt;/span&gt;&lt;/a&gt;
			&lt;a href="void(0)" class="next_arrow" id="next"&gt;&lt;span&gt;→&lt;/span&gt;&lt;/a&gt;
		&lt;/div&gt;
		&lt;div class="pic_list"&gt;
			&lt;ul id="picListItem"&gt;
				&lt;li&gt;&lt;a href="void(0)" class="sel"&gt;Standard Room&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;Sea view Room (PVSU1)&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;Royale Suite&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;Bella Suite&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;11Royale Suite (PVSU1)&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;Royale Suite&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;Bella Suite&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="void(0)"&gt;Royale Suite (PVSU1)&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
		&lt;a href="void(0)" class="mbtn mbtn-mini" id="close"&gt;X&lt;/a&gt;
	&lt;/div&gt;</pre>
<p><strong>CSS样式：</strong></p>
<pre>*{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;}</pre>
<p><strong>javascript:</strong></p>
<pre>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 &amp;&amp; who.tagName == "A" &amp;&amp; who.getAttribute("imgurl") &amp;&amp; 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 &amp;&amp; document.defaultView.getComputedStyle){
			name = name.replace(/[A-Z]/g,"-$1");
			name = name.toLowerCase();
			var s = document.defaultView.getComputedStyle(elem,'');
			return s &amp;&amp; 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();

}</pre>
<p><a class="btn-demo" href="http://www.daqianduan.com/example/?pid=4878" target="_blank">点此查看实例展示</a></p>
<p>转载请注明：<a href="#">大前端</a> &raquo; <a href="#">JavaScript实现360度全景图片展示效果</a></p>		