2012-10-24 7 views
5

W moim dążeniu, aby dowiedzieć JavaScript czynię sam suwak, ale z animacji w javascript (przy użyciu css nie jest to problem dla mnie - to było robione na stronie Google), jak ten poniżej:Jak poprawnie przeprowadzić przesuwaną animację w javascript?

Oryginalny Google suwak (animacja z CSS):
http://www.google.com/about/datacenters/inside/

Moja praca do tej pory:

http://jsfiddle.net/TS7Xu/3/

<!-- language-all: lang-html --> 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
    #promo{ 
    display:block; 
    height: 354px; 
    width: 790px; 
    } 
    .promo-item { 
     width: 81px; 
     height: 354px; 
     float: left; 
    } 
    .promo-item.wide { 
     width: 613px; 
    } 
    .threeP { 
     background-color: rgb(206, 203, 203); 
    } 
    .oneP { 
     background-color: rgb(241, 220, 182); 
    } 
    .twoP { 
     background-color: rgb(187, 217, 226); 
    } 
</style> 
</head> 
<body> 
<div id="promo"> 
    <div class="promo-item twoP wide" id="twoP"> 
     <div> 
     </div> 
    </div> 
    <div class="promo-item threeP" id="threeP"> 
     <div> 
     </div> 
    </div> 
    <div class="promo-item oneP" id="oneP"> 
     <div> 
     </div> 
    </div> 
</div> 


<script type="text/javascript"> 
var oneP = document.getElementById('oneP'); 
var twoP = document.getElementById('twoP'); 
var threeP = document.getElementById('threeP'); 
step = 1; 
      function expandPanel1(){ 
       var h = oneP.clientWidth + step; 
       oneP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel1()", 5); 
       } else { oneP.style.width = 613+"px"; } 
      }    
      function expandPanel2(){ 
       var h = twoP.clientWidth + step; 
       twoP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel2()", 5) 
       } else { twoP.style.width = 613+"px"; } 
      }    
      function expandPanel3(){ 
       var h = threeP.clientWidth + step; 
       threeP.style.width = h+"px"; 
       if (h < 614 || h !=614) { 
        setTimeout("expandPanel3()", 5) 
       } else { threeP.style.width = 613+"px"; } 
      } 
      //--------------------------------------------- 
       function expandPanel1Minus(){ 
        var h = oneP.clientWidth - step; 
        oneP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel1Minus()", 5) 
        } else { oneP.style.width = 81+"px"; } 
       }    
       function expandPanel2Minus(){ 
        var h = twoP.clientWidth - step; 
        twoP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel2Minus()", 5) 
        } else { twoP.style.width = 81+"px"; } 
       }    
       function expandPanel3Minus(){ 
        var h = threeP.clientWidth - step; 
        threeP.style.width = h+"px"; 
        if (h > 80 || h !=80) { 
         setTimeout("expandPanel3Minus()", 5) 
        } else { threeP.style.width = 81+"px"; } 
       } 
      //--------------------------------------------- 
    oneP.onmouseover = function() { 
     expandPanel1() 
      expandPanel3Minus() 
      expandPanel2Minus() 
    } 
    twoP.onmouseover = function() { 
     expandPanel2() 
      expandPanel3Minus() 
      expandPanel1Minus() 
    } 
    threeP.onmouseover = function() { 
     expandPanel3() 
      expandPanel2Minus() 
      expandPanel1Minus() 
    } 
</script> 

Znam ten przykład ma błędów, jeśli to długa droga myszką na suwak, zaczyna „gwałtownie” run :) Ja celowo obniżona prędkość animacji.

Czy ktoś może udzielić mi wskazówek dotyczących prawidłowego wdrożenia?

+0

Możesz to zrobić całkowicie za pomocą css3. Pracując nad przykładem dla ciebie. – tobspr

+0

@ tobias-springer Wiem, że można to zrobić za pomocą css (dla mnie jest to dość proste), ale uczę się javascript i jestem bardzo zainteresowany, aby zrobić to z nim. – user1769072

+0

Okay, ale tutaj jest rozwiązanie css: http://jsfiddle.net/aJzgJ/4/embedded/result/ – tobspr

Odpowiedz

1

Oto czysta implementacja JS - JSFiddle link. Jeśli skrzypce nie zostaną zapisane, oto tylko bit JS. Reszta kodu HTML jest taka sama jak OP. funkcja go jest wywoływana przy obciążeniu ciała.

var f, s, t; 
var which; 

function go() { 
    f = document.getElementById('oneP'); 
    s = document.getElementById('twoP'); 
    t = document.getElementById('threeP'); 

    which = s; 

    f.onmouseover = function() { 
     foo(this) 
    }; 

    s.onmouseover = function() { 
     foo(this) 
    }; 

    t.onmouseover = function() { 
     foo(this) 
    }; 
} 

function foo(e) { 
    if (e.clientWidth < 613) { 
     e.style.width = (e.clientWidth) + 10 + "px"; 
     which.style.width = (which.clientWidth - 10) + "px"; 

     setTimeout(function() { 
      foo(e); 
     }, 5); 
    } 
    else if (e.clientWidth > 613) { 
     e.style.width = "613px"; 
     which.style.width = "81px"; 

     which = e; 
    } 
}​ 

Jest trochę pracy lewo myślę, animacja nie jest wystarczająco szybki, więc jest to możliwe do myszy nad na innym odcinku, gdy animacja jest uruchomiony. Pozostawiam ci trochę :)

+0

Ho-ho. Bardzo wdzięczny za takie eleganckie rozwiązanie. Resztę rzeczy, które zrobię, poprawię samemu :) – user1769072

1

Jeśli chcesz zaoszczędzić dużo czasu, powinieneś zrobić to za pomocą jQuery. Wypróbuj to rozwiązanie w wersji http://jsfiddle.net/QXRVb/. W tym przykładzie nie wolałem zmieniać rozmiaru elementów div. Użyłem indeksów Z i animacji jQuery, aby je przenieść. W ten sposób łatwiej jest im zająć właściwą pozycję.

<style> 
#promo{ 
    width:900px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    overflow:hidden; 
} 
#oneP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background:#999; 
    z-index:1; 
} 
#twoP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:150px; 
    background:#ddd; 
    z-index:0; 
} 
#threeP{ 
    width:600px; 
    height:300px; 
    position:absolute; 
    top:0px; 
    left:750px; 
    background:#666; 
    z-index:1; 
} 
</style> 

<html> 
<div id="promo"> 
<div id="oneP">  
</div> 
<div id="twoP">  
</div> 
<div id="threeP">  
</div> 
</div> 
</html> 

<script> 
$('#oneP').mouseover(function() { 
    $('#oneP').animate({ 
     left: 0 
    },200); 
    $('#threeP').animate({ 
     left: 750 
    },200); 
    $('#twoP').animate({ 
     left: 450 
    },200); 
}); 

$('#twoP').mouseover(function() { 
    $('#oneP').animate({ 
     left: -450 
    },200);  
    $('#threeP').animate({ 
     left: 750 
    },200); 
    $('#twoP').animate({ 
     left: 150 
    },200); 
}); 

$('#threeP').mouseover(function() { 
    $('#threeP').animate({ 
     left: 300 
    },200);  
    $('#oneP').animate({ 
     left: -450 
    },200); 
    $('#twoP').animate({ 
     left: -150 
    },200); 
});​ 
</script>` 

Za pomocą tej metody można łatwo umieścić znacznik obrazu wewnątrz elementów div.

+0

Dziękuję bardzo za twój czas i "czas przetwarzania" twojego mózgu. :) Twoja metoda nie pozostała niezauważona, dzięki za doświadczenie! – user1769072