Podstrony
- telcocafe
- Js + PHP pomocy!!!
- [JS] Problem ze skryptem pobierającym źródło strony skrypt pobierający źródło strony
- menu przewijane menu w js
- Menu Darmowe menu w JS
- [JS] Wyświetlanie obrazków w danym dniu jak za pomocą javaScript wyświetlać obrazki
- [php, mod rewrite] Czyli ustalenie reguły wykonywania reguły dla żądań NIe zawierajacych .'js'
- Pomocy ! JS z formularzem! :(
- [js] Select I Zmiana W Zaleznosci Od 2 Selecta
- PHP i SJ Jak wyświetlić zmienne JS w PHP
- [xml/js]Parsowanie xml w javascript
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- kuchniabreni.xlx.pl
telcocafe
Witam.Ostatnio wpadłem na pomysł, aby w celach edukacyjnych zaimplementować sobie pasek do przewijania divów [efekt taki można uzyskać we flashu bardzo łatwo, ja jednak chciałbym ominąć takie rozwiązanie ]. Otóż chodzi o to, że mam div np. z miniaturkami zdjęć, a że jest ich bardzo dużo - nie mieszczą się w divie, a co za tym idzie trzeba je przewijać (najczęściej w poziomie) i właśnie takie coś chciałbym zrobić. PŁYNNE przewijanie zdjęć w divie po naciśnięciu przycisku. Tylko, co do tego wykorzystać? js, ajax? jakieś wskazówki, rady jak takie cudo stworzyć?
[ proszę bez zbędnych komentarzy typu "nie wiesz jak coś zrobić, a się zabierasz", gdyż wytyczanie sobie celów nie do osiągnięcia na dzień dzisiejszy, pozwala na większy skok umiejętności, jeżeli te cele są odpowiednio dobrane. ]
Użytkownik Skyslash edytował ten post 02 listopad 2007, 00:14
http://interface.eyecon.ro/demos -> SLIDER :)
naprawdę przyjemne w użyciu ;)
Hmm.. Ciężko.. Narazie doszedłem do kombinacji z właściwością Clip:
<html><head></head><body> <span onclick="przewin()">Kokoss przewijaj</span> <div id="div" style="width: 200px; height: 1000px; position: absolute; overflow: hidden; clip: rect(0,200,200,0)"> <div style="width: 200px; height: 200px; background-color: #ff0000"></div> <div style="width: 200px; height: 200px; background-color: #00ff00"></div> <div style="width: 200px; height: 200px; background-color: #0000ff"></div> <div style="width: 200px; height: 200px; background-color: #000000"></div> <div style="width: 200px; height: 200px; background-color: #ff0000"></div> </div> <script type="text/javascript"> var max = 800; var height = 200; var ile = 0; var div = document.getElementById("div"); div.style.position = 'absolute'; function przewin(){ div.style.clip = "rect("+ile+", 200, "+(ile+200)+", 0)"; if((ile+200) < max){ ile += 5; setTimeout("przewin()", 10); } } </script> </body></html>
Gdyby tylko zatrzymać to przewijanie w miejscu byłoby dobrze.
EDIT
Jak chcesz to się tamtym pobaw... Tu masz gotowe działające...
<html><head></head><body> <div id="div" style="width: 200px; height: 1000px; position: absolute; overflow: hidden; clip: rect(0,200,200,0);"> <div style="width: 200px; height: 200px; background-color: #ff0000;"></div> <div style="width: 200px; height: 200px; background-color: #00ff00;"></div> <div style="width: 200px; height: 200px; background-color: #0000ff;"></div> <div style="width: 200px; height: 200px; background-color: #000000;"></div> <div style="width: 200px; height: 200px; background-color: #ff0000;"></div> </div> <div id="div" style="left: 250px; width: 200px; height: 1000px; position: absolute; overflow: hidden;"> <span onclick="przewin()">Kokoss UP</span><br /> <span onclick="odwin()">Kokoss DOWN</span><br /> Topval = <span id="ile"></span><br /> Bottomval = <span id="ile+200"></span><br /> Top = <span id="top"></span><br /> Clip = <span id="clip"></span> <script type="text/javascript"> var max = 800; var height = 200; var ile = 0; var speed = 10; var powieksz = 5; var predkosc = speed*powieksz; var div = document.getElementById("div"); var top = div.offsetTop; function przewin(){ div.style.clip = "rect("+ile+", 200, "+(ile+200)+", 0)"; div.style.top = top-ile; document.getElementById("top").innerHTML = top-ile; document.getElementById("ile").innerHTML = ile; document.getElementById("ile+200").innerHTML = ile+200; document.getElementById("clip").innerHTML = "rect("+ile+", 200, "+(ile+200)+", 0)"; if((ile+200) < max){ ile += powieksz; setTimeout("przewin()", speed); } } function odwin(){ div.style.clip = "rect("+ile+", 200, "+(ile+200)+", 0)"; div.style.top = top-ile; document.getElementById("top").innerHTML = top-ile; document.getElementById("ile").innerHTML = ile; document.getElementById("ile+200").innerHTML = ile+200; document.getElementById("clip").innerHTML = "rect("+ile+", 200, "+(ile+200)+", 0)"; if((ile+200) > height){ ile -= powieksz; setTimeout("odwin()", speed); } } </script> </body></html>
Prędkość mozesz określać w zmiennej speed i powieksz :) Prędkość zwiększysz zmiejszając speed i zwiekszajac powieksz
EDIT 2
Wciągneło mnie to.. Teraz ja mam pytanie. Jak obliczyć ile przy danej szerokości czcionce itd. zajmie nam teskt?? Czyli Daje sobie diva tylko z okreslona szerokoscia i nie podaje wysokosci. w js gdy chce uzyskac wysokosc dostaje pusty wynik.. jak to obliczyć?
Użytkownik kokoss15 edytował ten post 02 listopad 2007, 13:22
Dziękuję bardzo za odpowiedzi ;). Znalazłem bardzo ciekawy ( bo banalny ) kod :)
<script type="text/javascript"> /************************************************************************* This code is from Dynamic Web Coding at [url="http://www.dyn-web.com/"]http://www.dyn-web.com/[/url] See Terms of Use at [url="http://www.dyn-web.com/bus/terms.html"]http://www.dyn-web.com/bus/terms.html[/url] regarding conditions under which you may use this code. This notice must be retained in the code as is! *************************************************************************/ var timer_id; function scroll_iframe(frm,inc,dir) { if (timer_id) clearTimeout(timer_id); if (window.frames[frm]) { if (dir == "v") window.frames[frm].scrollBy(0, inc); else window.frames[frm].scrollBy(inc, 0); timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20); } } function stopScroll() { if (timer_id) clearTimeout(timer_id); } </script> (...) <a href="java script:;" onmouseover="scroll_iframe('ifr', 4, 'h'); window.status='Hover here to scroll right.'; return true">Scroll Page</a>
http://www.dyn-web.com/dhtml/iframes/ --> Scrolling iframes, vertically and horizontally
i mam pytanie. Jak wiadomo iframes, to przestarzała metoda wstawiania stron do innych stron www i zaleca się używanie znacznika <OBJECT> do tego celu. I teraz jak odwołać się z punktu widzenia js do danego obiektu? window.frames[id] tyczy się ramek, jest jakiś odpowiednik tego dla object?
a nie łatwiej byłoby użyć jakąś bibliotekę dla JS :) np jQuery . Wiem że w pluginach było gdzieś ładne przewijanie divów http://jquery.com/plugins/ poszukaj, przeglądaj dema, na pewno znajdziesz . Biblioteka ta naprawdę w łatwy sposób pozwala operować na elementach dokumentu
Pozdrawiam