Erstellen Sie einen Folieneffekt in jQuery

Ich versuche, einen Folieffekt wie die Grooveshark Reproduktionsliste oder die You Tube Reproduktionsliste zu machen. Was ich bisher gemacht habe, ist das Implementieren der Schaltflächen und der Leiste, aber jetzt stecke ich in der Implementierung des Schiebereffekts fest. Dies ist der Code meiner HTML-Datei:Erstellen Sie einen Folieneffekt in jQuery

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>CAMBIAR...</title> 
      <link rel="stylesheet" href="html 5/slider.css" /> 
      <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
      <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script> 
     </head> 

     <body> 
      <div id="slider"> 
       <div id="atras">&lt</div> 
       <div id="content"> 
        &nbsp; 
       </div> 
       <div id="adelante">&gt</div> 
       <div id="operaciones"> 
        <div id="add">+</div> 
       </div> 
       <div id="footer"></div> 
      </div> 
      <script> 
       $(document).ready(
        function() { 
         var cuenta = 0; 
         var elementos = Array(); 

         $("#slider #atras").mousedown(function() { 
          $(this).css({"box-shadow": "inset 5px 0px 10px rgba(0, 0, 0, 0.5)", 
             "color": "white"}); 
         }); 

         $("#slider #atras").mouseup(function() { 
          $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)", 
             "color": "black"}); 
         }); 

         $("#slider #adelante").mousedown(function() { 
          $(this).css({"box-shadow": "inset -5px 0px 10px rgba(0, 0, 0, 0.5)", 
             "color": "white"}); 
         }); 

         $("#slider #adelante").mouseup(function() { 
          $(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)", 
             "color": "black"}); 
         }); 

         $("#slider #operaciones #add").click(function() { 
          var new_element = $("<div class='element' id='unique'>"+ (++cuenta) +"</div>"); 
          //new_element.insertAfter($("#slider #content .element:last-child")); 
          $("#slider #content").prepend(new_element); 
         }); 
        }); 
      </script> 
     </body> 
    </html>

Dies ist meine CSS-Datei:

* { 
     margin: 0px; 
     padding: 0px; 
    } 

    body { 
     background: #57595a; 
     font-family: Helvetica, sans-serif; 
     font-size: 16px; 
     text-align: center; 
    } 

    #slider { 
     border: 5px dotted white ; 
     margin: 20px auto; 
     line-height: 6.3em; 
     padding: 10px; 
     width: 95%; 
    } 

    #slider #atras { 
     background-color: #CCCCCC; 
     border-radius: 0.25em; 
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
     color: black; 
     float: left; 
     height: 100%; 
     width: 3%; 
    } 

    #slider #atras:hover { 
     cursor: pointer; 
    } 
    #slider #content { 
     text-align: left; 
     float: left; 
     width: 74%; 
    } 

    #slider #adelante { 
     background-color: #CCCCCC; 
     border-radius: 0.25em; 
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
     color: black; 
     float: left; 
     height: 100%; 
     width: 3%; 
    } 

    #slider #adelante { 
     cursor: pointer; 
    } 

    #slider #operaciones { 
     float: left; 
     width: 20%; 
    } 

    #slider #content .element { 
     background: orange; 
     border-radius: 0.5em; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
     color: white; 
     display: inline-block; 
     height: 100px; 
     margin: auto 5px; 
     text-align: center; 
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
     width: 100px; 
    } 

    #slider #operaciones #add { 
     background-color: #f99200; 
     border-radius: 0.5em; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
     color: white; 
     display: inline-block; 
     height: 50px; 
     vertical-align: middle; 
     margin: 2px 5px; 
     line-height: 3.2em; 
     text-align: center; 
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
     width: 50px; 
    } 

    #slider #content .element:hover { 
     background-color: #8a8a8a; 
     color: white; 
    } 

    #slider #operaciones #add:hover { 
     background-color: rgb(97, 103, 106); 
     cursor: pointer; 
    } 

    #footer { 
     clear: both; 
    }

Ich erwarte, dass jemand mir mit diesem helfen könnte. Jeder Ansatz ist gültig, ich muss nur wissen, was zu tun ist, nicht um es zu tun. Danke, ich schätze die Hilfe von allen.

Quelle

2012-03-29 Andrés

möglich Duplikat gemacht werden [Wie kann ich ein Karussell/Slider-Effekt in JavaScript erstellen?] (Http://stackoverflow.com/questions/ 9937471/how-can-i-create-a-karussell-slider-effect-in-javascript) –

Für jQuery Mobile den Dia-Effekt kann mit Übergang Attribute

<a href="#newpage" data-transition="slide">click here</a>

Quelle

2012-04-16 20:11:54 Priebe

Erstellen Sie einen Folieneffekt in jQuery

Antwort

Verwandte Themen