360 no funciona si agrego un div

tlucena4 · #1 (**permalink**) 28/05/2014, 00:17

Buenas

A ver quien me puede dar una mano.

aca esta funcionanado: http://xxxmugs.com/demo1.html

Tengo este codigo html:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="taza.js"></script>
</head>
 
<body>
 
<img id="img1" src="img/miaov (0).jpg" />
<div id="bg"></div>
<div id="prog">
    妙味课堂——360度全景展示 载入中......<span>0%</span>
    <div id="bar"></div>
</div>
 
</body>
</html>

Y luego tengo este script en el archivo taza.js:

Código Javascript:

Ver originalwindow.onload=function ()
{
    var SCALE=10;
    var oImg=document.getElementById('img1');
    var oTxt=document.getElementById('prog').getElementsByTagName('span')[0];
    var oBar=document.getElementById('bar');
    var aImg=[];
    var iImgCount=77;
    var iLoaded=0;
    var iNow=0;
    var i=0;
    //加载所有资源
    for(i=0;i<iImgCount;i++)
    {
        (function (i){
            var oNewImg=new Image();
            oNewImg.onload=function ()
            {
                oTxt.innerHTML=oBar.style.width=Math.ceil(100*iLoaded/iImgCount)+'%';
                oNewImg.onload=null;
                
                var oImg=document.createElement('img');
                oImg.src=this.src;
                oImg.style.display='none';
                document.body.appendChild(oImg);
                aImg[i]=oImg;
                
                if(++iLoaded==iImgCount)onLoad();
            };
            oNewImg.src='img/miaov ('+i+').jpg';
        })(i);
    }
    
    //效果
    function onLoad()
    {
        for(i=0;i<iImgCount;i++)if(!aImg[i])alert('资源加载失败，请刷新重试');
        var lastImg=null;
        document.getElementById('prog').style.display=document.getElementById('bg').style.display='none';
        document.body.removeChild(oImg);
        var body=document.body;
        oImg=null;
        var timer=null;
        var num=iNow;
        var speed=0;
        
        aImg[0].style.display='block';
        lastImg=aImg[0];
        
        document.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var startX=oEvent.clientX;
            var lastX=startX;
            
            if(body.setCapture)
            {
                body.onmousemove=onMove;
                body.onmouseup=onUp;
                
                body.setCapture();
            }
            else
            {
                document.onmousemove=onMove;
                document.onmouseup=onUp;
            }
            
            function onMove(ev)
            {
                var oEvent=ev||event;
                var i=-(oEvent.clientX-startX)/SCALE;
                
                num=(iNow+i+Math.abs(Math.floor(i/iImgCount))*iImgCount)%iImgCount;
                
                if(lastImg!=aImg[parseInt(num)])
                {
                    lastImg.style.display='none';
                    aImg[parseInt(num)].style.display='block';
                    lastImg=aImg[parseInt(num)];
                }
                
                speed=-(oEvent.clientX-lastX)/SCALE;
                lastX=oEvent.clientX;
                
                return false;
            }
            
            function onUp()
            {
                this.onmousemove=null;
                this.onmouseup=null;
                
                if(body.releaseCapture)body.releaseCapture();
                
                iNow=num;
                
                startMove();
            }
            
            stopMove();
            
            return false;
        };
        
        function startMove()
        {
            timer=setInterval(function (){
                iNow=(iNow+speed+Math.abs(Math.floor(i/iImgCount))*iImgCount)%iImgCount;
                lastImg.style.display='none';
                aImg[parseInt(iNow)].style.display='block';
                lastImg=aImg[parseInt(iNow)];
                
                speed*=0.884;
                
                if(Math.abs(speed)<=1)
                {
                    clearInterval(timer);
                    speed=0;
                }
            }, 30);
        }
        
        function stopMove()
        {
            clearInterval(timer);
        }
    }
};

Bueno la cosa es que yo quiero ahora agregar un div contenedor a todo el codigo dentro del body pero cuando lo hago me deja de funcionar el 360.
Esto es lo que yo quiero hacer:

Código HTML:

Ver original<body>
<div id="mug">
<img id="img1" src="img/miaov (0).jpg" />
<div id="bg"></div>
<div id="prog">
    妙味课堂——360度全景展示 载入中......<span>0%</span>
    <div id="bar"></div>
</div>
</div>
</body>

Y quiero hacerlo para que me permita mover el 360 por toda la pagina.

Alguno se le ocurre una solucion?

Saludos