javascript实现3D切换焦点图

#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}#list li{height:40px;width:400px; position:relative;cursor:pointer;-webkit-perspective:800px; }#list li div{height:40px;width:400px; -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;position:relative;-webkit-transform:translateZ(-200px);-webkit-transform:50ms all linear;}#list span{height:40px; width:400px; position:absolute;left:0;top:0; overflow:hidden;}#list div span:nth-child(1){background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(200px);}#list div span:nth-child(2){background:url(img/2.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(200px) rotateY(-90deg);}#list div span:nth-child(3){background:url(img/3.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(-200px);}#list div span:nth-child(4){background:url(img/4.jpg) no-repeat;-webkit-transform-origin:left;-webkit-transform:translateZ(200px) rotateY(90deg);}#list em{ width:400px;height:400px; position:absolute;left:0;background:#666;}#list li em:nth-of-type(1){-webkit-transform-origin:top;-webkit-transform:translateZ(200px) rotateX(-90deg); top:0;}#list li em:nth-of-type(2){-webkit-transform-origin:bottom;-webkit-transform:translateZ(200px) rotateX(90deg); bottom:0;}#list li:nth-last-child(1){ z-index:10;}#list li:nth-last-child(2){ z-index:20;}#list li:nth-last-child(3){ z-index:30;}#list li:nth-last-child(4){ z-index:40;}#list li:nth-last-child(5){ z-index:50;}#list li:nth-last-child(6){ z-index:60;}#list li:nth-child(2) span{ background-position:0 -40px;}#list li:nth-child(3) span{ background-position:0 -80px;}#list li:nth-child(4) span{ background-position:0 -120px;}#list li:nth-child(5) span{ background-position:0 -160px;}#list li:nth-child(6) span{ background-position:0 -200px;}#list li:nth-child(7) span{ background-position:0 -240px;}#list li:nth-child(8) span{ background-position:0 -280px;}#list li:nth-child(9) span{ background-position:0 -320px;}#list li:nth-child(10) span{ background-position:0 -360px;}#list li:nth-child(11) span{ background-position:0 -400px;}#btns{ width:130px; margin:0 auto;}#btns li{ width:20px;height:20px;background:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:20px; float:left; color:#f60; margin:0 3px; cursor:pointer;}#btns .active{ background:#f60;color:#fff;}

<ul id="list"> <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li></ul><ol id="btns"> <li class="active">1</li>  <li>2</li>  <li>3</li>  <li>4</li></ol>

var oList=document.getElementById("list");var oBtns=document.getElementById("btns");tabPic(oList,oBtns);function tabPic(obj,btns){ var aLi=obj.getElementsByTagName("li"); var aBtn=btns.getElementsByTagName("li"); var oUl=document.getElementsByTagName('ul')[0]; var iDis=aLi[0].offsetWidth; var iDeg=90; aBtn.iNow=0; for(var i=0;i<aBtn.length;i++) { oUl.title=aBtn[i].title='妙味课堂-www.miaov.com'; aBtn[i].index=i; aBtn[i].onclick=function() {  for(var i=0;i<aLi.length;i++)  {  starMove(aLi[i],-this.index*iDeg,aBtn);  } }; } for(var i=0;i<aLi.length;i++) {  aLi[i].index=i; aLi[i].iDeg=0; aLi[i].off=false; aLi[i].onmousedown=function(ev) {  if(this.off)  {  return;  }  var ev=event||ev;  var iNowX=ev.clientX;  var iNowDeg=0;  var oThis=this;  var iLength=0;  var iMin=0;  var iMax=0;  document.onmousemove=function(ev)  {  if(Math.abs(iNowDeg)>=80)  {   return;  }  var ev=event||ev;  iNowDeg+=(ev.clientX-iNowX)/iDis*(iDeg-30);  iLength=Math.abs(parseInt(iNowDeg/9));  iMin=oThis.index-iLength>0?oThis.index-iLength:0;  iMax=oThis.index+iLength<aLi.length?oThis.index+iLength:aLi.length-1;   for(var i=iMin;i<=iMax;i++)  {   aLi[i].iDeg+=(ev.clientX-iNowX)/iDis*(iDeg-30);   setDeg(aLi[i]);  }  iNowX=ev.clientX;    }  document.onmouseup=function()  {  var iEnd=0;  document.onmouseup=document.onmousemove=null;  if( Math.abs(iNowDeg)>iDeg/4)  {   iEnd=iNowDeg>0?90-iNowDeg:-(90-Math.abs(iNowDeg));  }  else  {   iEnd=-iNowDeg;  }    iEnd=Math.round(iEnd+oThis.iDeg);  for(var i=0;i<aLi.length;i++)  {   starMove(aLi[i],iEnd,aBtn);  }  }  return false; }; }}function starMove(obj,iTarget,aBtn){ if(obj.timer) { clearInterval(obj.timer); } obj.off=true; var iSpeed=0; var iNow= iTarget>=0? Math.abs((aBtn.length-iTarget/90)%aBtn.length): Math.abs((iTarget/90) % aBtn.length); if(iNow!=aBtn.iNow) { aBtn[aBtn.iNow].className=""; aBtn.iNow=iNow; aBtn[aBtn.iNow].className="active"; } obj.timer=setInterval( function() {  iSpeed+=(iTarget-obj.iDeg)/12;  iSpeed*=0.86;  if(Math.abs(obj.iDeg-iTarget)<0.5 && Math.abs(iSpeed)<0.5)  {  clearInterval(obj.timer);  obj.iDeg=iTarget;  obj.off=false;  }  else  {   obj.iDeg+=iSpeed;  }  setDeg(obj); },24 );}function setDeg(obj){ var oDiv=obj.children[0]; with(oDiv.style) { WebkitTransform="translateZ(-200px) rotateY("+obj.iDeg+"deg)"; }}