[chyba js] scroller

0

Witam.

Chcialbym osiagnac opisany ponizej efekt:
1.male czarnobiale zdjecia ok 50x50px przesuwaja sie jedno po drugim z lewej do prawej strony ekranu/tabeli.
2.OnMouseOver zrobi to zdjecie kolorowe i zatrzyma przesuwanie zdjec

Generalnie znalazlem jakies tam sobie skrypty z <url>www.dynamicdrive.com</url>, ale chcialbym tez aby np. po zblizeniu myszki do jednej krawedzi, kierunek zmienial sie, tak jakbysmy cofali przegladanie zdjec.

Czy moze dysponujecie takim kodem lub linkiem do strony ktora o takim kodzie wspomina?

0

Nie znam jeszcze ort! javascriptu, ale widzialem gdzie takie cos - tylko ze we flashu...

0

We flashu tez widzialem. Jednak potrzebuje tego bez flasha. Widzialem skrypty pozwalajace na zmiane kierunku lub automatyczne przewijanie strony, ale rowniez nie jestem dobry w js i nie dam rady tego sam polaczyc w jedna calosc, dlatego tez napisalem tu na 4p.

0

Jeszcze jedna kwestia: Ponizej zamieszczam kod ktory wyswietla scrollera pionowego, ale o malych rozmiarach. Czy ktos potrafi doradzic aby scroller byl od gory do dolu (badz odwrotnie) przegladarki?

<HTML><HEAD><TITLE>Scroller h1</TITLE>


<script language="javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

info=new Array()
info[0]='<img src=1.jpg style="filter: Gray" onmouseover="this.style.filter=\'none\'" onmouseout="this.style.filter=\'Gray\'"><BR>'
info[1]='<img src=1.jpg style="filter: Gray" onmouseover="this.style.filter=\'none\'" onmouseout="this.style.filter=\'Gray\'"><BR>'
info[2]='<img src=1.jpg style="filter: Gray" onmouseover="this.style.filter=\'none\'" onmouseout="this.style.filter=\'Gray\'"><BR>'
info[3]='<img src=1.jpg style="filter: Gray" onmouseover="this.style.filter=\'none\'" onmouseout="this.style.filter=\'Gray\'"><BR>'

pausing=0 // 0 = continuous, 1 = pause
pause=2000 // paused time

step=1
run_rate=50
next_message=0

function init_scroller_v1(){
el_cont=document.getElementById("cont_div")
el_one=document.getElementById("div_one")
el_two=document.getElementById("div_two")

el_one.innerHTML=""
el_two.innerHTML=info[0]

if(el_one.offsetHeight<parseInt(el_cont.style.height)){el_one.style.height=parseInt(el_cont.style.height)}
if(el_two.offsetHeight<parseInt(el_cont.style.height)){el_two.style.height=parseInt(el_cont.style.height)}

el_one.style.top=0
el_two.style.top=parseInt(el_cont.style.height)//el_one.offsetHeight+parseInt(el_cont.style.height)

scrollme()
document.getElementById("cmode").innerHTML="<b>Continuous</b>" // display purpose only DELETE
}

function scrollme(){
chk=0
if(el_one.offsetHeight<parseInt(el_cont.style.height)){el_one.style.height=parseInt(el_cont.style.height)}
if(el_two.offsetHeight<parseInt(el_cont.style.height)){el_two.style.height=parseInt(el_cont.style.height)}

el_one_pos=parseInt(el_one.style.top)
el_two_pos=parseInt(el_two.style.top)

el_one_pos-=step
el_one.style.top=el_one_pos

el_two_pos-=step
el_two.style.top=el_two_pos

if(el_one_pos< - el_one.offsetHeight){

next_message++
if(next_message>info.length-1){next_message=0}
el_one.innerHTML=info[next_message]

if(el_two.offsetHeight<parseInt(el_cont.style.height)){el_one.style.top=parseInt(el_cont.style.height)}
else{el_one.style.top=parseInt(el_two.style.top)+el_two.offsetHeight}

chk=1
}

if(el_two_pos< - el_two.offsetHeight){

next_message++
if(next_message>info.length-1){next_message=0}
el_two.innerHTML=info[next_message]


if(el_one.offsetHeight<parseInt(el_cont.style.height)){el_two.style.top=parseInt(el_cont.style.height)}
else{el_two.style.top=parseInt(el_one.style.top)+el_one.offsetHeight}

chk=1
}

timer=setTimeout("scrollme()",run_rate)

if(pausing==1&&chk==1){
clearTimeout(timer)
chk=0
setTimeout("scrollme()",pause)
}

}

function set_mode(){  // this function is for display purpose only DELETE
if(document["f1"]["r1"][0].checked){
pausing=0
document.getElementById("cmode").innerHTML="<b>Continuous</b>"
document.getElementById("pmode").innerHTML="Pause"
}
else{
pausing=1
document.getElementById("cmode").innerHTML="Continuous"
document.getElementById("pmode").innerHTML="<b>Pause</b>"
}
}


// -->
</script>
</HEAD>
<BODY style="overflow-x:hidden" onload="init_scroller_v1()">

<div  id="cont_div" style="position:absolute; left:215px; top:80px; width:81px; height:137px; border:1px dotted #8e8462;clip:rect(0,250,120,0);background-color:#c9bda9;color:#000000">
<div id="div_one" style="position:absolute; left:0px; top:0px;z-index:1">DIV 1</div>
<div id="div_two" style="position:absolute; left:0px; top:0px;z-index:1">DIV 2</div>
</div>

<!-- This form is for display purpose only DELETE -->

</HTML>

Z gory dizekuje

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto