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='妙味课堂-'; 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)"; } }
这效果只是一个尝试，如有需要的朋友，可直接在下面留言，发送源码。
您可能感兴趣的文章: