基于无缝滚动原理的全景效果
code:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>360全景效果</title> <style> /*Reset*/ body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0;} body,input,textarea{font-size:12px;font-family:"microsoft yahei"} body{text-align:center;color:#33383D;background:#f1f1f1;font-size:11px;} ul,ol{list-style-type:none;} img{border:0;} button,input{line-height:normal;*overflow:visible;} input,textarea{outline:none;} a{color:#3b8dd1;text-decoration:none;} a:hover{color:#8cac52;} .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:#fff;zoom:1;} .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 li a.sel, .pop_see_360pic 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='#7ffffff',endColorstr='#7ffffff');background:url(about:blank);background:rgba(255,255,255,0.5);z-index:9;} .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.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;} .pic_box_inner{position:absolute;width:5000px;overflow:hidden;*zoom:1;} .pic_box_inner img{float:left;} </style> </head> <body> <div class="pop_see_360pic" style="" 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="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> </div> <div class="pic_list"> <ul id="picListItem"> <li><a href="javascript:void(0)" class="sel">Standard Room</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_1.jpg">Sea view Room (PVSU1)</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_2.jpg">Royale Suite</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_3.jpg">Bella Suite</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_4.jpg">11Royale Suite (PVSU1)</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_5.jpg">Royale Suite</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_6.jpg">Bella Suite</a></li> <li><a href="javascript:void(0)" imgurl="http://www.cocss.com/wp-content/uploads/2012/12/hotel_7.jpg">Royale Suite (PVSU1)</a></li> </ul> </div> <a href="javascript:void(0)" class="mbtn mbtn-mini" id="close">X</a> </div> <script> 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]; this.oScrollImgcopy = this.oScrollImg.cloneNode(true); this.oScrollIner.appendChild(this.oScrollImgcopy); document.getElementById('close').onclick = function(){ oThis.close(popseebox); }; oThis.resetImg(); 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; } }; 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)<-(this.oScrollImg.width+parseFloat(this.getStyle(this.oScrollBox,"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"; }, opause:function(){ clearTimeout(this.timeout); }, next: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(){ 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(); } </script> </body> </html>
