Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [js] zatrzymanie scroll-a na czas najechania myszką
krzyszbi
post
Post #1





Grupa: Zarejestrowani
Postów: 251
Pomógł: 13
Dołączył: 15.09.2005

Ostrzeżenie: (0%)
-----


witam
zrobiłem sobie scroll-a informacji i teraz bym jeszcze chciał dodać aby jak się najedzie myszką na div w którym jest scroll aby się mi zatrzymało przewijanie
kokmbinuje z onMouseOver, onBlur i nie wiem czemu mi nie chce działaś lub nie wiem czego użyć
proszę o podpowiedzi
Kod
var i = 0;
var j = 250;
var k = 500;
var l = 750;
var m = 1000;
var n = 1250;
var speed = 25;

function imgScroll(){

    document.getElementById("scroll_div_1").style.left = i + "px";
    document.getElementById("scroll_div_2").style.left = j + "px";
    document.getElementById("scroll_div_3").style.left = k + "px";
    document.getElementById("scroll_div_4").style.left = l + "px";
    document.getElementById("scroll_div_5").style.left = m + "px";
    document.getElementById("scroll_div_5").style.left = m + "px";
    
    i--;
    j--;
    k--;
    l--;
    m--;
    if (i < -250) {    i = 1000; }
    if (j < -250) {    j = 1000; }
    if (k < -250) {    k = 1000; }
    if (l < -250) {    l = 1000; }
    if (m < -250) {    m = 1000; }
    
    //alert(document.getElementById('scroll_container'));
    if (document.getElementById('scroll_div_1').onmouseover || document.getElementById('scroll_div_2').onmouseover){
        speed = 0;
    }

    scroller = setTimeout("imgScroll()", speed);
}
onload = imgScroll;

obecnie działa to tak ze na starcie widać 3 całe div-y później w miarę przesuwania 1 się chowa a 4 pokazuje a ogólnie jak widać jest 6 div-ów
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
ziqzaq
post
Post #2





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

Ostrzeżenie: (0%)
-----


Witam.
Zgaduję po twoim kodzie, że chcesz to mieć w czystym js bez dodatków i nie interesują cie biblioteki jak np. jQuery.
Na wszelki wypadek masz tu przykład podpinania zdarzeń pod elementy strony: JQuery mouseover.
Ogólnie to chyba lepiej byłoby oprzeć to właśnie na jakiejś bibliotece/frameworku js.

A teraz kod (nie jQuery):

Po pierwsze sprawdzenie dokumentu czy jest cały załadowany:
Źródło: http://www.javascriptkit.com/dhtmltutors/domready.shtml
Kod
var alreadyrunflag=0 //flag to indicate whether target function has already been run

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){alreadyrunflag=1;}, false)
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      alreadyrunflag=1;
    }
  }
}


Teraz podpięcie zdarzeń i przykładowa funkcja operująca na jakimś elemencie html, w tym przypadku id="divek" (co 1s zwiększa licznik):
Kod
var s = 1; //
var go = 1; // start licznika=1, stop=0
// Podpinamy zdarzenia w zaleznosci od przegladarki
function bla_set() {
    var d = document.getElementById("divek");
    if( BrowserDetect.browser == 'Explorer' ) {
        d.attachEvent("onmouseover", function () {go=0}, false);
        d.attachEvent("onmouseout", function () {go=1;bla();}, false);
    }
    else {
        d.addEventListener("mouseover", function () {go=0}, false);
        d.addEventListener("mouseout", function () {go=1;bla();}, false);
    }
}
// Funkcja "licznik"
function bla() {
    var d = document.getElementById("divek");
    d.innerHTML = s;
    s = s + 1;
    if(go==1)setTimeout("bla()",1000);
}


Do powyższego dodałem jeszcze wykrycie przeglądarki (z kodu połapiesz się w którym momencie) link do rozwiązania: http://www.quirksmode.org/js/detect.html. Zapisz ten kod od "var DetectBrowser" (klasę DetectBrowser) w w jakimś pliku i go zaincluduj.
Ogólnie chodzi o to by podpiąć zdarzenia (event) pod obiekt a robi się to inaczej np. w FF i IE, więc skorzystałem z gotowego rozwiązania wyrywania przeglądarki.

Na koniec:
Kod
window.onload=function(){
  bla_set();
  bla();
}


Powyższe testowałem na FF2, i IE6.
Mam nadzieję, że o to chodziło, a jeśli to jest złe podejście to bardzo chętnie poznam dobre (to do doświadczonych forumowiczów) (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Pozdr.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 11.10.2025 - 04:00