今天做需求碰到一个类似3D效果图一样的 如下图所示：

 

这种效果 原理就是用定位 position:absolute；z-index:XX；由于这种效果以前有个同事用jquery做过这样的 所以今天看了他的代码 仿照下做了一个，用Jquery animate这个函数可以做 通过移动图片 不断的给他们定义样式及定位就可以了！但是有个问题要注意下 ： 第一代码很撮 代码不能重用，只能实现效果！因为我今天做的需求有两个这样的 所以要重复的写不同的代码，第二：由于这是jquery，那当然要引入Jquery压缩包，很奇怪的是 引入线上的Google API Jquery压缩包 在IE下 点击右箭头时会报错 貌似说jquery压缩包里面 参数无效！在火狐和谷歌游览器都是正常的！所以之后引入了Jquery1.7压缩包就可以正常运行了 没有错误了 可能是jquery新版本增加了一些属性吧！第三要慢慢的理解顺时针旋转和逆时针旋转，可能在理解的过程中 某某同学会晕头啊，我本人也曾经晕过头 呵呵！做不到那种效果！只有注意精神理解下就可以了！下面是HTML代码！

 


    
    
    

     
     
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

     
     
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

     
     
  3. <head> 
    4. 

     
     
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 

     
     
  5. <title>无标题文档</title> 
    6. 

     
     
  6. <style> 
    7. 

     
     
  7. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-size:12px; font-family:"宋体";} 
    8. 

     
     
  8. table{ border-collapse:collapse; border-spacing:0;} 
    9. 

     
     
  9. fieldset,img{ border:0; display:block;} 
    10. 

     
     
  10. address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;} 
    11. 

     
     
  11. ol,ul{ list-style:none;} 
    12. 

     
     
  12. caption,th{ text-align:left;} 
    13. 

     
     
  13. h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} 
    14. 

     
     
  14. .fl{ float:left;} 
    15. 

     
     
  15. .fr{ float:right;} 
    16. 

     
     
  16. .marquee1{ width:402px; height:158px; overflow:hidden;} 
    17. 

     
     
  17. .J_btn{width:21px; height:23px; overflow:hidden; margin-top:70px;} 
    18. 

     
     
  18. .prev{ background:url(images/prev.jpg) no-repeat; cursor:pointer;} 
    19. 

     
     
  19. .M_scroll{ position:relative; float:left; margin:0 8px 0 16px; display:inline; width:335px; height:158px;} 
    20. 

     
     
  20. .M_scroll ul{width:335px; height:158px;} 
    21. 

     
     
  21. .next{ background:url(images/next.jpg) no-repeat; cursor:pointer;} 
    22. 

     
     
  22. .num1,.num3{ background:url(images/wbg2.jpg) no-repeat; width:109px; height:109px; overflow:hidden;} 
    23. 

     
     
  23. .num1{ position:absolute; top:25px; left:0; z-index:999;} 
    24. 

     
     
  24. .num1 .conpic{ margin:4px;width:150px; height:101px; overflow:hidden;} 
    25. 

     
     
  25. .num3 .conpic{margin:4px;width:100px; height:101px; overflow:hidden;} 
    26. 

     
     
  26. .num3{ position:absolute; top:25px; left:228px; z-index:1000;} 
    27. 

     
     
  27. .num2{ position:absolute; top:0; left:88px; z-index:1001; background:url(images/wbg.jpg) no-repeat; width:158px; height:158px; overflow:hidden;} 
    28. 

     
     
  28. .num2 .conpic{ margin:4px 4px; width:150px; height:150px; overflow:hidden;} 
    29. 

     
     
  29. </style> 
    30. 

     
     
  30. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    31. 

     
     
  31. </head> 
    32. 

     
     
  32. <body> 
    33. 

     
     
  33. <div class="marquee1 fl"> 
    34. 

     
     
  34.     <div class="prev J_btn fl"></div> 
    35. 

     
     
  35.         <div class="M_scroll"> 
    36. 

     
     
  36.             <ul> 
    37. 

     
     
  37.                 <li class="num1"> 
    38. 

     
     
  38.                     <div class="conpic"> 
    39. 

     
     
  39.                         <a href="#" target="_blank"><img  src="http://img03.taobaocdn.com/tps/i3/T1xSyJXcBhXXXXXXXX-539-314.jpg" width="150" height="150"/></a> 
    40. 

     
     
  40.                     </div> 
    41. 

     
     
  41.                 </li> 
    42. 

     
     
  42.                <li class="num2"> 
    43. 

     
     
  43.                     <div class="conpic"> 
    44. 

     
     
  44.                         <a href="#" target="_blank"><img  src="images/photo.jpg" width="150" height="150"/></a> 
    45. 

     
     
  45.                     </div> 
    46. 

     
     
  46.                 </li> 
    47. 

     
     
  47.                 <li class="num3"> 
    48. 

     
     
  48.                     <div class="conpic"> 
    49. 

     
     
  49.                         <a href="#" target="_blank"><img  src="http://img02.taobaocdn.com/tps/i2/T1H0qHXihkXXXXXXXX-539-314.png" width="150" height="150"/></a> 
    50. 

     
     
  50.                     </div> 
    51. 

     
     
  51.                 </li> 
    52. 

     
     
  52.             </ul> 
    53. 

     
     
  53.         </div> 
    54. 

     
     
  54.         <div class="next J_btn fl"></div>    
    55. 

     
     
  55.   </div> 
    56. 

     
     
  56. <script type="text/javascript" src="3D.js"></script> 
    57. 

     
     
  57. </body> 
    58. 

     
     
  58. </html> 
    59.

Javascript代码：

 


    
    
    

     
     
  1. $(function(){ 
    2. 

     
     
  2.     var t = 400; 
    3. 

     
     
  3.     $(".prev").click(function(){ 
    4. 

     
     
  4.         if($(".M_scroll li:eq(1)").css("left")=="88px"){ 
    5. 

     
     
  5.             centerFunction(2); 
    6. 

     
     
  6.             rightFunction(3); 
    7. 

     
     
  7.             leftFunction(1); 
    8. 

     
     
  8.         }; 
    9. 

     
     
  9.         if($(".M_scroll li:eq(2)").css("left")=="88px"){ 
    10. 

     
     
  10.             centerFunction(3); 
    11. 

     
     
  11.             rightFunction(1); 
    12. 

     
     
  12.             leftFunction(2); 
    13. 

     
     
  13.              
    14. 

     
     
  14.         }; 
    15. 

     
     
  15.         if($(".M_scroll li:eq(0)").css("left")=="88px"){ 
    16. 

     
     
  16.             centerFunction(1); 
    17. 

     
     
  17.             rightFunction(2); 
    18. 

     
     
  18.             leftFunction(3);     
    19. 

     
     
  19.         }; 
    20. 

     
     
  20.              
    21. 

     
     
  21.     }); 
    22. 

     
     
  22.     $(".next").click(function(){ 
    23. 

     
     
  23.         if($(".M_scroll li:eq(1)").css("left")=="88px"){ 
    24. 

     
     
  24.             nextCenter(2); 
    25. 

     
     
  25.             nextRight(3); 
    26. 

     
     
  26.             nextLeft(1);     
    27. 

     
     
  27.         }; 
    28. 

     
     
  28.         if($(".M_scroll li:eq(2)").css("left")=="88px"){ 
    29. 

     
     
  29.             nextCenter(3); 
    30. 

     
     
  30.             nextRight(1); 
    31. 

     
     
  31.             nextLeft(2); 
    32. 

     
     
  32.         }; 
    33. 

     
     
  33.         if($(".M_scroll li:eq(0)").css("left")=="88px"){ 
    34. 

     
     
  34.             nextCenter(1); 
    35. 

     
     
  35.             nextRight(2); 
    36. 

     
     
  36.             nextLeft(3); 
    37. 

     
     
  37.         };           
    38. 

     
     
  38.     })   
    39. 

     
     
  39.     /** 顺时针旋转 */ 
    40. 

     
     
  40.     function centerFunction(num){ 
    41. 

     
     
  41.             $(".num" +num).animate({"width":"109px","height":"109px","left":"0px","top" : "25px","z-index": "999"},t,function(){ 
    42. 

     
     
  42.                 $(this).css("background-image","url(images/wbg2.jpg)");  
    43. 

     
     
  43.             }).children(".conpic").animate({"width":"101px","height":"101px"},t,function(){ 
    44. 

     
     
  44.                 $(this).children("img").css({"width":"150px","height":"101px"});     
    45. 

     
     
  45.             }); 
    46. 

     
     
  46.         } 
    47. 

     
     
  47.         function leftFunction(num){ 
    48. 

     
     
  48.             $(".num"+num).animate({"width":"109px","height":"109px","left":"228px","top":"25px","z-index":"1000"},t,function(){ 
    49. 

     
     
  49.                 $(this).css("background-image","url(images/wbg2.jpg)");  
    50. 

     
     
  50.             }).children(".conpic").animate({"width":"100px","height":"101px"},t,function(){ 
    51. 

     
     
  51.                 $(this).children("img").css({"width":"100px","height":"101px"});     
    52. 

     
     
  52.             }); 
    53. 

     
     
  53.         } 
    54. 

     
     
  54.         function rightFunction(num){ 
    55. 

     
     
  55.             $(".num"+num).animate({"width":"158px","height":"158px","left":"88px","top":"0px","z-index":"1001"},t,function(){ 
    56. 

     
     
  56.                 $(this).css("background-image","url(images/wbg.jpg)");   
    57. 

     
     
  57.             }).children(".conpic").animate({"width":"150px","height":"150px"},t,function(){ 
    58. 

     
     
  58.                 $(this).children("img").css({"width":"150px","height":"150px"});     
    59. 

     
     
  59.             }); 
    60. 

     
     
  60.         } 
    61. 

     
     
  61.         /*逆时针旋转 */ 
    62. 

     
     
  62.         function nextCenter(num){ 
    63. 

     
     
  63.             $(".num"+num).animate({"width":"109px","height":"109px","left":"228px","top":"25px","z-index":"999"},t,function(){ 
    64. 

     
     
  64.                 $(this).css("background-image","url(images/wbg2.jpg)");  
    65. 

     
     
  65.             }).children(".conpic").animate({"width":"100px","height":"101px"},t,function(){ 
    66. 

     
     
  66.                 $(this).children("img").css({"width":"100px","height":"101px"});     
    67. 

     
     
  67.             }); 
    68. 

     
     
  68.         } 
    69. 

     
     
  69.         function nextRight(num){ 
    70. 

     
     
  70.             $(".num"+num).animate({"width":"109px","height":"109px","left":"0px","top":"25px","z-index":"1000"},t,function(){ 
    71. 

     
     
  71.                 $(this).css("background-image","url(images/wbg2.jpg)");  
    72. 

     
     
  72.             }).children(".conpic").animate({"width":"100px;","height":"101px"},t,function(){ 
    73. 

     
     
  73.                 $(this).children("img").css({"width":"100px","height":"101px"});     
    74. 

     
     
  74.             }); 
    75. 

     
     
  75.         } 
    76. 

     
     
  76.         function nextLeft(num){ 
    77. 

     
     
  77.             $(".num" +num).animate({"width":"158px","height":"158px","left":"88px","top" : "0px","z-index": "1001"},t,function(){ 
    78. 

     
     
  78.                 $(this).css("background-image","url(images/wbg.jpg)");   
    79. 

     
     
  79.             }).children(".conpic").animate({"width":"150px","height":"150px"},t,function(){ 
    80. 

     
     
  80.                 $(this).children("img").css({"width":"150px","height":"150px"});     
    81. 

     
     
  81.             });      
    82. 

     
     
  82.         }    
    83. 

     
     
  83. }); 
    84.

下面有附件下载 可以看看！