JavaScript realizes 3D Toggle Focus Graph _javascript Skill

Do a mouse drag and drop with CSS3 small attempt, screenshot as follows:

Familiar with the drag-and-drop effect of the friend should not be unfamiliar mouse hold on, drag the implementation of the way.
This little demo is trying to apply the relevant knowledge points in the CSS3 to the picture display,
When you drag the picture, show a stereo feeling ~ ~

The direct code is as follows:

#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 (a) span{background-position:0; #list Li: Nth-child (one) 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;}

HTML

<ul id= "List" > <li> <div> <span></span> <span></span> ;span></span> <span></span> <em></em> <em></em> </di v> </li> <li> <div> <span></span> <span></span> < span></span> <span></span> <em></em> <em></em> </div > </li> <li> <div> <span></span> <span></span> <s pan></span> <span></span> <em></em> <em></em> </div&
  Gt </li> <li> <div> <span></span> <span></span> <span> </span> <span></span> <em></em> <em></em> </div> & Lt;/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&
   Gt <div> <span></span> <span></span> <span></span> <span ></span> <em></em> <em></em> </div> </li> <li> & lt;div> <span></span> <span></span> <span></span> <span& gt;</span> <em></em> <em></em> </div> </li> <li> &L T;div> <span></span> <span></span> <span></span> <span></span> <em></em> <em></em> </div> </li> <li> <div> &L
      t;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>

JAVASCRIPT

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= ' Miao flavor class-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)";
 }
}

This effect is just a try, such as the need for friends, can be directly in the following message, send the source code.