Blog literacki, portal erotyczny - seks i humor nie z tej ziemi
Animacja wyzwalana myszką
Podobnie, jak w przypadku przechwytywania klawiatury, możemy użyć także myszki do uruchomienia dowolnej animacji. Poniżej pokażę jak zrobić link którego naciśnięcie spowoduje przesuwanie bloku. Puszczenie klawisza myszki spowoduje przerwanie przesuwania.
Skrypt nie powinien być dla Ciebie zaskoczeniem. Po raz kolejny skorzystamy ze zmiennej aktywności a funkcja odpowiedzialna za poruszanie jest dokładną kopią funkcji poprzednich.
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30)
}
}
Całe sedno zawarte jest w kodzie określającym link:
<A HREF="javascript:void(null)" onMouseDown="block.active=true; slide(); return false;" onMouseUp="block.active=false" onMouseOut="block.active=false">Poruszaj</A>
Po wystąpieniu zdarzenie onMouseDown ustawiana jest zmienna aktywności na true i wywoływana funkcja slide() która rozpoczyna animację. Dopóki trzymany jest klawisz myszy nic się nie zmienia. Animacja trwa dopóki klawisz nie zostanie zwolniony - wtedy wywołane zostanie zdarzenie onMouseUp. Obsługa tego zdarzenia ustawi zmienną aktywności na false, co zatrzyma animację.
Zdarzenie onMouseOut także ustawia zmienną aktywności na false. Wykonywane jest tutaj ze względu na obsługę ewentualnych błędów. Okazało się, że jeśli poruszysz myszką i zjedziesz z linku i wtedy puścisz klawisz, animacja się nie zatrzyma. Powodem tej sytuacji jest to, że nie będzie wtedy zdarzenia onMouseUp - puszczasz klawisz nie nad linkiem. Tą sytuację załatwia nam obsługa zdarzenia onMouseOut.
Kliknij tutaj aby zobaczyć przykład
Strona główna
Następna lekcja:
Zamiana obrazków (Rollover)
copyright 1998 Dan Steinman