Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] zatrzymanie scroll-a na czas najechania myszką
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
krzyszbi
19.09.2008, 11:29:48
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
Shili
19.09.2008, 11:55:52
Ja bym proponowała zrobić to mniej więcej w taki sposób:
Kod
<script>
var i = 0;
var j = 250;
var k = 500;
var l = 750;
var m = 1000;
var n = 1250;
var speed = 5;
var active = 0;

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 (active != 1){
        scroller = setTimeout("imgScroll()", speed);
    }
}
</script>
<style>
div {position: absolute;}
</style>
<body onload="imgScroll();">
<div id="scroll_div_1" onmouseover="active = 1;" onmouseout="active = 0; imgScroll();">Tekst 1</div>
<div id="scroll_div_2" onmouseover="active = 1;" onmouseout="active = 0; imgScroll();">Tekst 2</div>
<div id="scroll_div_3" onmouseover="active = 1;" onmouseout="active = 0; imgScroll();">Tekst 3</div>
<div id="scroll_div_4" onmouseover="active = 1;" onmouseout="active = 0; imgScroll();">Tekst 4</div>
<div id="scroll_div_5" onmouseover="active = 1;" onmouseout="active = 0; imgScroll();">Tekst 5</div>
</body>
krzyszbi
19.09.2008, 12:27:24
niby można ale staram sie oddzielić treść od javascriptu ale nie wiem właśnie jak zatrzymać tutaj scroll-a
ziqzaq
19.09.2008, 15:00:15
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) winksmiley.jpg
Pozdr.
krzyszbi
22.09.2008, 08:01:09
mniej więcej o to jak narazie działa nie narzekam pomógł +1
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.