[JS] horizontaler Slideffekt

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [JS] horizontaler Slideffekt

    Hallo. Ich benutzt das Framework Prototype in verbindung mit Scriptacolus..Da es dort aber ja nur Slideffekte wie BindUp und BindDown gibt, dachte ich mir ich versuche mich mal selber an einem Slider um auch von links nach rechts und umgekehrt zu/auf zu sliden.

    Das ganze ist jetzt Statisch erstmal. Das heißt von 0px => 450px und von 450px=>0px
    Naja da ich ja eher Anfänger in der Javascript geschichte bin und mehr lernen will, wollte ich einfach mal Fragen was ihr für Verbesserungsvorschläge an dem Codeschnipsel habt.
    Wenn es totaler Mist ist, könnt ihr das auch ruhig sagen

    Um den Code mal kurz zu erklären:

    Die Funktion "slide_effekt" ist der Kern. Nehmen wir an unser Div Element ist 450px breit.
    Dann führen wir "slider('minus')" aus.

    Damit wird slide_effekt aufgerufen und setzt var running erstmal auf 1. Das ganze hab ich gemacht, damit nur ein timeout gestartet wird, egal wie oft man auf den Button klickt.
    Dann wird die Breite um 5px bei jedem aufruf verkleiert jenachdem welche Methode vergrößert. Ist das Div Element 0px breit/ 450px breit, wird running wieder auf 0 gesetzt.

    Quellcode

    1. var running=0;
    3. function slider(method,id){
    4. if(running==0){
    5. slide_effekt(method,id);
    6. }
    7. }
    10. function slide_effekt(method,id) {
    11. var ba;
    12. var b =$(id).style.width;
    13. b =b.split('px');
    15. if(method=='minus'){
    16. if(b[0] > 0){
    17. ba =parseInt(b[0])-parseInt(5);
    18. $(id).style.width=ba+'px';
    19. running=1;
    20. window.setTimeout(function() { blind_effect(method,id); },20);
    21. }else{
    22. running=0;
    23. }
    26. }else if(method=='plus'){
    27. if(b[0] < 450){
    28. ba =parseInt(b[0])+parseInt(5);
    29. $(id).style.width=ba+'px';
    30. running=1;
    31. window.setTimeout(function() { blind_effect(method,id);},20);
    32. }else{
    33. running=0;
    34. }
    35. }
    36. }
    Alles anzeigen


    Quellcode

    1. <button onclick="slider('minus','element')">-</button>
    2. <button onclick="slider('plus','element')">+</button>
    3. <div id="element" style="height:300px;width:450px;background-color:lightblue;"></div>


    Danke schonmal für die Vorschläge