首页 / 脚本样式 / JavaScript / javascript实现3D切换焦点图

熟悉拖拽效果的朋友应该不会陌生鼠标按住以后，左右拖动的实现方式。
这个小demo里尝试的是把CSS3中的相关知识点运用到图片展示中，
当拖动图片时，显示出立体的感觉～～
直接代码如下：

#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）"; }}