maj 14
Dziś dla odmiany mała ciekawostka, o której dopiero niedawno się dowiedziałem. Nigdy wcześniej nie miałem pojęcia, iż jest możliwość obsłużenia scrolla w myszce :-) Zauważywszy jednak taką opcję w Google Maps, postaram się ją także zaimplementować w ramach nauki.
A więc do rzeczy. Odpowiedzialnym za to zdarzeniem (w JavaScript) jest DOMMouseScroll (Mozilla) oraz mousewheel (IE, Opera).
Przykład użycia scrolla myszki
Żeby nie było samej teorii, napiszmy prosty przykład (opaty na jQuery):
1 | <span id="napis">blog.kamilbrenk.pl</span> |
Kod skryptu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).bind('DOMMouseScroll mousewheel', function(evt, delta) { // pobierz wartość z scrolla delta = delta || -evt.detail || evt.wheelDelta; // detekcja operacji na scrollu myszki var size_text = (delta > 0) ? 3 : -3; // zmień rozmiar tekstu $('#napis').css('font-size', parseInt($('#napis').css('font-size')) + size_text ); evt.preventDefault(); }); |
Mam nadzieję, że wszystko jest jasne, a przykład działania wystarczający. I to by było na tyle, może komuś się przyda :-).
Scroll fajny jest, ale jakoś… mało sensownych przykładów..
Hehe, to prawda – nie ma zbyt wielu użytecznych przykładów na wykorzystanie scrolla ;)
Witam, użycie scrolla można wykorzystać do np galerii zdjęć coby nie klikać w każde z osobna, lub też do prewijania divów na stronie pod warunkiem jeśli stronia się nie będzie przewijać, można także zrobić menu przewijane które będzie aktywne do przewijania dopiero po najechaniu na nie, albo z użyciem funkcji selected() zaznaczony tekst powiększać lub pomniejszać.
Sam na js się dobrze nie znam bo wolę php ale kilka ciekawostek nt. js poznałem także dzięki temu blogowi :)
Pozdrawiam :)
Dziękuję Piotrek za fajne pomysły i miłe słowa :)