Foros del Web » Programando para Internet » Javascript »

360 no funciona si agrego un div

Estas en el tema de 360 no funciona si agrego un div en el foro de Javascript en Foros del Web. Buenas A ver quien me puede dar una mano. aca esta funcionanado: http://xxxmugs.com/demo1.html Tengo este codigo html: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> ...
  #1 (permalink)  
Antiguo 28/05/2014, 00:17
 
Fecha de Ingreso: noviembre-2013
Mensajes: 5
Antigüedad: 10 años, 4 meses
Puntos: 0
Información 360 no funciona si agrego un div

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
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <script type="text/javascript" src="taza.js"></script>
  4. </head>
  5.  
  6.  
  7. <img id="img1" src="img/miaov (0).jpg" />
  8. <div id="bg"></div>
  9. <div id="prog">
  10.     妙味课堂——360度全景展示 载入中......<span>0%</span>
  11.     <div id="bar"></div>
  12. </div>
  13.  
  14. </body>
  15. </html>


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

Código Javascript:
Ver original
  1. window.onload=function ()
  2. {
  3.     var SCALE=10;
  4.     var oImg=document.getElementById('img1');
  5.     var oTxt=document.getElementById('prog').getElementsByTagName('span')[0];
  6.     var oBar=document.getElementById('bar');
  7.     var aImg=[];
  8.     var iImgCount=77;
  9.     var iLoaded=0;
  10.     var iNow=0;
  11.     var i=0;
  12.     //加载所有资源
  13.     for(i=0;i<iImgCount;i++)
  14.     {
  15.         (function (i){
  16.             var oNewImg=new Image();
  17.             oNewImg.onload=function ()
  18.             {
  19.                 oTxt.innerHTML=oBar.style.width=Math.ceil(100*iLoaded/iImgCount)+'%';
  20.                 oNewImg.onload=null;
  21.                
  22.                 var oImg=document.createElement('img');
  23.                 oImg.src=this.src;
  24.                 oImg.style.display='none';
  25.                 document.body.appendChild(oImg);
  26.                 aImg[i]=oImg;
  27.                
  28.                 if(++iLoaded==iImgCount)onLoad();
  29.             };
  30.             oNewImg.src='img/miaov ('+i+').jpg';
  31.         })(i);
  32.     }
  33.    
  34.     //效果
  35.     function onLoad()
  36.     {
  37.         for(i=0;i<iImgCount;i++)if(!aImg[i])alert('资源加载失败,请刷新重试');
  38.         var lastImg=null;
  39.         document.getElementById('prog').style.display=document.getElementById('bg').style.display='none';
  40.         document.body.removeChild(oImg);
  41.         var body=document.body;
  42.         oImg=null;
  43.         var timer=null;
  44.         var num=iNow;
  45.         var speed=0;
  46.        
  47.         aImg[0].style.display='block';
  48.         lastImg=aImg[0];
  49.        
  50.         document.onmousedown=function (ev)
  51.         {
  52.             var oEvent=ev||event;
  53.             var startX=oEvent.clientX;
  54.             var lastX=startX;
  55.            
  56.             if(body.setCapture)
  57.             {
  58.                 body.onmousemove=onMove;
  59.                 body.onmouseup=onUp;
  60.                
  61.                 body.setCapture();
  62.             }
  63.             else
  64.             {
  65.                 document.onmousemove=onMove;
  66.                 document.onmouseup=onUp;
  67.             }
  68.            
  69.             function onMove(ev)
  70.             {
  71.                 var oEvent=ev||event;
  72.                 var i=-(oEvent.clientX-startX)/SCALE;
  73.                
  74.                 num=(iNow+i+Math.abs(Math.floor(i/iImgCount))*iImgCount)%iImgCount;
  75.                
  76.                 if(lastImg!=aImg[parseInt(num)])
  77.                 {
  78.                     lastImg.style.display='none';
  79.                     aImg[parseInt(num)].style.display='block';
  80.                     lastImg=aImg[parseInt(num)];
  81.                 }
  82.                
  83.                 speed=-(oEvent.clientX-lastX)/SCALE;
  84.                 lastX=oEvent.clientX;
  85.                
  86.                 return false;
  87.             }
  88.            
  89.             function onUp()
  90.             {
  91.                 this.onmousemove=null;
  92.                 this.onmouseup=null;
  93.                
  94.                 if(body.releaseCapture)body.releaseCapture();
  95.                
  96.                 iNow=num;
  97.                
  98.                 startMove();
  99.             }
  100.            
  101.             stopMove();
  102.            
  103.             return false;
  104.         };
  105.        
  106.         function startMove()
  107.         {
  108.             timer=setInterval(function (){
  109.                 iNow=(iNow+speed+Math.abs(Math.floor(i/iImgCount))*iImgCount)%iImgCount;
  110.                 lastImg.style.display='none';
  111.                 aImg[parseInt(iNow)].style.display='block';
  112.                 lastImg=aImg[parseInt(iNow)];
  113.                
  114.                 speed*=0.884;
  115.                
  116.                 if(Math.abs(speed)<=1)
  117.                 {
  118.                     clearInterval(timer);
  119.                     speed=0;
  120.                 }
  121.             }, 30);
  122.         }
  123.        
  124.         function stopMove()
  125.         {
  126.             clearInterval(timer);
  127.         }
  128.     }
  129. };

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
  1. <div id="mug">
  2. <img id="img1" src="img/miaov (0).jpg" />
  3. <div id="bg"></div>
  4. <div id="prog">
  5.     妙味课堂——360度全景展示 载入中......<span>0%</span>
  6.     <div id="bar"></div>
  7. </div>
  8. </div>
  9. </body>

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

Alguno se le ocurre una solucion?

Saludos

Última edición por tlucena4; 28/05/2014 a las 10:32

Etiquetas: 360, funcion, html, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:51.