基于无缝滚动原理的全景效果

最新推荐文章于 2024-08-12 22:54:41 发布
weixin_30627381
最新推荐文章于 2024-08-12 22:54:41 发布
阅读量65
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/joyho/articles/3071968.html
版权
← ‖ →
Standard Room
Sea view Room (PVSU1)
Royale Suite
Bella Suite
11Royale Suite (PVSU1)
Royale Suite
Bella Suite
Royale Suite (PVSU1)
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>
转载于:https://www.cnblogs.com/joyho/articles/3071968.html
weixin_30627381
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于无缝滚动原理的全景效果

Loading...← ‖ →Standard RoomSea view Room (PVSU1)Royale SuiteBella Suite11Royale Suite (PVSU1)Royale SuiteBella SuiteRoyale Suite (PVSU1)Xcode:<!DOCT...
复制链接

扫一扫