自己用div来代替图片,制作的一个点击让图片相册360 纵向旋转的效果图

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  5.     <title>北京理工篮园科技技术有限公司</title> 
  6.     <script type="text/javascript" src="/libs/jquery/jquery-1.4.2.min.js"></script> 
  7.     <style type="text/css"> 
  8.  
  9.         html{ 
  10.         overflow-x: hidden; 
  11.         overflow-y: hidden; 
  12.         } 
  13.         body { 
  14.             margin:0; 
  15.             padding:0; 
  16.              
  17.         } 
  18.  
  19.         p { 
  20.             font-family:"华文新魏"; 
  21.             font-size:18pt; 
  22.         } 
  23.         #main{ 
  24.            width:1100px; 
  25.            height:600px; 
  26.            border:0px solid #000; 
  27.            margin:auto; 
  28.            background-image:url('/images/bgline.jpg'); 
  29.  
  30.         } 
  31.         #top{ 
  32.            width:980px; 
  33.            height:128px; 
  34.             
  35.            margin:auto;    
  36.         } 
  37.         #header1{ 
  38.            width:980px; 
  39.            height:32px; 
  40.         } 
  41.         #header2{ 
  42.            width:980px; 
  43.            height:94px; 
  44.            border:0px solid #000; 
  45.         } 
  46.         #header3{ 
  47.            width:980px; 
  48.            height:2px; 
  49.         } 
  50.         #showPro{ 
  51.            width:980px; 
  52.            height:462px; 
  53.            border:1px solid #000; 
  54.            margin:auto; 
  55.         } 
  56.         #showLeft{ 
  57.            position:absolute; 
  58.            width:200px; 
  59.            height:420px; 
  60.            border:1px solid #000; 
  61.            margin-top:20px; 
  62.            margin-left:90px; 
  63.            float:left; 
  64.            z-index:99; 
  65.         } 
  66.         #showRight{ 
  67.            position:absolute; 
  68.            width:200px; 
  69.            height:420px; 
  70.            border:1px solid #000; 
  71.            margin-top:20px; 
  72.            margin-left:700px; 
  73.            float:left; 
  74.            z-index:99; 
  75.         } 
  76.         .photo{ 
  77.            position:absolute; 
  78.            width:100px; 
  79.            height:150px; 
  80.            border:1px solid #000;  
  81.         } 
  82.         .photo_header{ 
  83.            position:absolute; 
  84.            width:100px; 
  85.            height:150px; 
  86.            border:1px solid #000; 
  87.            
  88.            opacity:0.5; 
  89.            z-index:999; 
  90.            margin-top:15px; 
  91.            margin-left:25px;    
  92.         } 
  93.         .photo_show{ 
  94.            position:absolute; 
  95.            width:100px; 
  96.            height:150px; 
  97.            border:1px solid #000; 
  98.            
  99.            opacity:0.5; 
  100.            z-index:99999; 
  101.            margin-top:135px; 
  102.         } 
  103.         .photo_buttom{ 
  104.            position:absolute; 
  105.            width:100px; 
  106.            height:150px; 
  107.            border:1px solid #000;  
  108.            opacity:0.5; 
  109.            z-index:9999; 
  110.            margin-top:255px; 
  111.            margin-left:25px; 
  112.             
  113.         } 
  114.         .photo_behined{ 
  115.            position:absolute; 
  116.            width:100px; 
  117.            height:150px; 
  118.            border:1px solid #000; 
  119.             
  120.            opacity:0.2; 
  121.            z-index:99; 
  122.            margin-top:135px; 
  123.            margin-left:50px; 
  124.             
  125.         } 
  126.         #showMain{ 
  127.            position:absolute; 
  128.            border:1px solid #000; 
  129.            width:900px; 
  130.            height:300px; 
  131.            z-index:0; 
  132.            margin-top:80px; 
  133.            margin-left:40px; 
  134.         } 
  135.  
  136.     </style> 
  137.     <script> 
  138.        $(function(){ 
  139.            $("#showLeft div").click(function(){ 
  140.                changImg("showLeft",this.id); 
  141.            }); 
  142.            $("#showRight div").click(function(){ 
  143.                changImg("showRight",this.id); 
  144.            }); 
  145.             
  146.        }); 
  147.        function changImg(info,id){ 
  148.                var standars=$("#"+info+" .photo_show").css("margin-top"); 
  149.                var clickTop=$("#"+id).css("margin-top"); 
  150.                var len1=standars.substr(0,standars.length-2); 
  151.                var len2=clickTop.substr(0,clickTop.length-2); 
  152.                var flag=len2-len1; 
  153.                if(flag<0){ 
  154.                 // alert("向下"); 
  155.                     //div个数 
  156.                     var list=$("#"+info+" div").length; 
  157.                          for(var i=1;i<=list;i++){ 
  158.                                 var moveId="#"
  159.                                 if(info=='showLeft'){ 
  160.                                     moveId+="photo"+i; 
  161.                                 }else{ 
  162.                                     moveId+="photoRight"+i; 
  163.                                     //alert(m);photoRight4 
  164.                                 } 
  165.                                 var tempValue=$(moveId).attr("value"); 
  166.                                  if(tempValue==1){ 
  167.                                      
  168.                                      
  169.                                     $(moveId).attr("value",2); 
  170.                                     $(moveId).animate({ 
  171.                                                "margin-top":"255", 
  172.                                                "margin-left":"25" 
  173.                                          },  
  174.                                          { 
  175.                                                 duration: 500, 
  176.                                                 complete: function(){ 
  177.                                                    //$("#showMain").css("background",$("#photo"+i).css("background")); 
  178.                                                 } 
  179.                                     }); 
  180.                                     $(moveId).removeClass("photo_show"); 
  181.                                     $(moveId).addClass("photo_buttom"); 
  182.                                  } 
  183.                                  if(tempValue==2){ 
  184.                                      
  185.                                     $(moveId).attr("value",3); 
  186.                                     $(moveId).animate({ 
  187.                                                "margin-top":"135", 
  188.                                                "margin-left":"50" 
  189.                                          },  
  190.                                          { 
  191.                                                 duration: 500, 
  192.                                                 complete: function(){ 
  193.                                                 } 
  194.                                     }); 
  195.                                     $(moveId).removeClass("photo_buttom"); 
  196.                                     $(moveId).addClass("photo_behined"); 
  197.  
  198.                                  } 
  199.                                  if(tempValue==3){ 
  200.                                      
  201.                                     $(moveId).attr("value",4); 
  202.                                     $(moveId).animate({ 
  203.                                                "margin-top":"15", 
  204.                                                "margin-left":"25" 
  205.                                          },  
  206.                                          { 
  207.                                                 duration: 500, 
  208.                                                 complete: function(){ 
  209.                                                 } 
  210.                                     }); 
  211.                                     $(moveId).removeClass("photo_behined"); 
  212.                                     $(moveId).addClass("photo_header"); 
  213.                                  } 
  214.                                  if(tempValue==4){ 
  215.                                     //alert("ddd"); 
  216.                                      
  217.                                     $(moveId).attr("value",1); 
  218.                                     $(moveId).animate({ 
  219.                                                "margin-top":"135", 
  220.                                                "margin-left":"0" 
  221.                                          },  
  222.                                          { 
  223.                                                 duration: 500, 
  224.                                                 complete: function(){ 
  225.                                                   //alert(id); 
  226.                                                   var tempColor=$("#"+id).css("background"); 
  227.                                                   $("#showMain").css("background",tempColor); 
  228.                                                 } 
  229.                                     }); 
  230.                                     $(moveId).removeClass("photo_header"); 
  231.                                     $(moveId).addClass("photo_show"); 
  232.                                  } 
  233.                          } 
  234.                 } 
  235.                         
  236.                if(flag>0){ 
  237.                          var list=$("#"+info+" div").length; 
  238.                          for(var i=1;i<=list;i++){ 
  239.                                 //alert(i); 
  240.                                 var moveId="#"
  241.                                 if(info=='showLeft'){ 
  242.                                     moveId+="photo"+i; 
  243.                                 }else{ 
  244.                                     moveId+="photoRight"+i; 
  245.                                     //alert(m);photoRight4 
  246.                                 } 
  247.                                 var tempValue=$(moveId).attr("value"); 
  248.                                  if(tempValue==1){ 
  249.                                      
  250.                                     $(moveId).attr("value",4); 
  251.                                     $(moveId).animate({ 
  252.                                                "margin-top":"15", 
  253.                                                "margin-left":"25" 
  254.                                          },  
  255.                                          { 
  256.                                                 duration: 500, 
  257.                                                 complete: function(){ 
  258.                                                    //$("#showMain").css("background",$("#photo"+i).css("background")); 
  259.                                                 } 
  260.                                     }); 
  261.                                     $(moveId).removeClass("photo_show"); 
  262.                                     $(moveId).addClass("photo_header"); 
  263.                                  } 
  264.                                  if(tempValue==2){ 
  265.                                      
  266.                                     $(moveId).attr("value",1); 
  267.                                     $(moveId).animate({ 
  268.                                                "margin-top":"135", 
  269.                                                "margin-left":"0" 
  270.                                          },  
  271.                                          { 
  272.                                                 duration: 500, 
  273.                                                 complete: function(){ 
  274.                                                 } 
  275.                                     }); 
  276.                                     $(moveId).removeClass("photo_buttom"); 
  277.                                     $(moveId).addClass("photo_show"); 
  278.  
  279.                                  } 
  280.                                  if(tempValue==3){ 
  281.                                      
  282.                                     $(moveId).attr("value",2); 
  283.                                     $(moveId).animate({ 
  284.                                                "margin-top":"255", 
  285.                                                "margin-left":"25" 
  286.                                          },  
  287.                                          { 
  288.                                                 duration: 500, 
  289.                                                 complete: function(){ 
  290.                                                 } 
  291.                                     }); 
  292.                                     $(moveId).removeClass("photo_behined"); 
  293.                                     $(moveId).addClass("photo_buttom"); 
  294.                                  } 
  295.                                  if(tempValue==4){ 
  296.                                     //alert("ddd"); 
  297.                                      
  298.                                     $(moveId).attr("value",3); 
  299.                                     $(moveId).animate({ 
  300.                                                "margin-top":"135", 
  301.                                                "margin-left":"50" 
  302.                                          },  
  303.                                          { 
  304.                                                 duration: 500, 
  305.                                                 complete: function(){ 
  306.                                                    var tempColor=$("#"+id).css("background"); 
  307.                                                   $("#showMain").css("background",tempColor); 
  308.                                                 } 
  309.                                     }); 
  310.                                     $(moveId).removeClass("photo_header"); 
  311.                                     $(moveId).addClass("photo_behined"); 
  312.                                  } 
  313.                          } 
  314.                } 
  315.                 
  316.        } 
  317.     </script> 
  318. </head> 
  319. <body> 
  320.    <div id="main"> 
  321.       <div id="top"> 
  322.          <div id="header1"></div> 
  323.          <div id="header2"><img src="/images/main_logo.jpg"/></div> 
  324.          <div id="header3"><img src="/images/main_logoline.jpg"/></div> 
  325.       </div> 
  326.       <div id="showPro"> 
  327.          <div id="showLeft"> 
  328.             <div id="photo4" value="4" class="photo_header" style="background:#7c7116;" ></div> 
  329.             <div id="photo1" value="1" class="photo_show" style="background:#df6810;"></div> 
  330.             <div id="photo2" value="2" class="photo_buttom" style="background:#10df85;"></div> 
  331.             <div id="photo3" value="3" class="photo_behined" style="background:#012210;"></div> 
  332.          </div> 
  333.          <div id="showRight"> 
  334.            <div id="photoRight4" value="4" class="photo_header" style="background:#7c7116;" ></div> 
  335.            <div id="photoRight1" value="1" class="photo_show" style="background:#df6810;"></div> 
  336.            <div id="photoRight2" value="2" class="photo_buttom" style="background:#10df85;"></div> 
  337.            <div id="photoRight3" value="3" class="photo_behined" style="background:#012210;"></div> 
  338.         </div> 
  339.          <div id="showMain" style=""> 
  340.           
  341.          </div> 
  342.       </div> 
  343.    </div> 
  344. </body> 
  345. </html> 

很简陋的代码,但觉得很实用。

 

可以加入让其自动旋转的操作

 

  1. var autospeed = 3000
  2.        //定义索引,图片从最后一张开始转起 
  3.        var index1=4
  4.        var index2=4
  5.        //左侧自动转向 
  6.        function autoroll1() { 
  7.                 //alert(index); 
  8.                 dinalChangImg("showLeft","photo"+index1); 
  9.                 //dinalChangImg("showRight","photoRight"+index); 
  10.                 index1--; 
  11.                 timer1 = setTimeout(autoroll1, autospeed); 
  12.                 if(index1<1
  13.                  index1=4
  14.                 //ul.animate({left:"-1000px"},speed); 
  15.         }; 
  16.         autoroll1();