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>
<img id="img1" src="img/miaov (0).jpg" />
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:
Y quiero hacerlo para que me permita mover el 360 por toda la pagina.
Alguno se le ocurre una solucion?
Saludos