Gombok és gördülési görbék felfelé és lefelé
Gombok és egy sima görgetés felfelé és lefelé az oldalra.
Ez a cikk egy egyszerű és nagyon elegáns példát mutat az "Up" és a "Down" gombok implementációjára a képek használata nélkül, valamint egy kis jQuery parancsfájl változatát, amely az oldal meghatározott irányba történő gördülését eredményezi.
A módszer azért jó, mert kezdetben, amikor az oldal fel van állítva, az "Up" gomb rejtve marad, ha lefelé görget - a "Le" gomb el van rejtve, a magassági paraméterek, amelyeknél a gombok megjelennek.
DEMO
Tehát a gombok HTML kódja így néz ki:
A görgetés iránymutatóinak végrehajtásához - a nyíl segítségével egyedi kódokat használnak, amelyeket egyszerűen átmásolnak és beillesztenek a címkére. Ez a megközelítés lehetővé teszi a képek használata nélkül, plusz hozzáadással az optimalizáláshoz, valamint lehetővé teszi, hogy egyszerűen beállíthassa és szükség esetén gyorsan megváltoztathatja a gombok megjelenését.
Ha szabványos speciális karaktereket használ az elemek tervezésében, akkor két ellenőrzést kell végrehajtania:
1) ellenőrizze a weboldal kódolását - UTF-8-nak kell lennie;
2) ellenőrizze ezt a szimbólumot a böngésző kompatibilitásához - függetlenül attól, hogy az megjelenik-e minden böngészőben, néha nem;
A HTML-kódot a sablonban kényelmesen helyezzük el, a gombok megjelenését és elrendezését CSS-ben állítjuk be (stíluskód a demó oldaltól):
menjen fel. lefelé mutató kijelzés: nincs;
pozíció: fix; / * pozícionálás * /
z-index: 9999; / * az oldal összes elemén * /
jobb: 15%; / * pozíció az oldalon, ha balra - balra * /
háttér: # 4F4F4F;
határ: 1px tömör #ccc;
határ-sugár: 5px;
kurzor: mutató;
szín: #fff;
text-align: center;
font: normál normál 42px / 42px sans-serif;
szöveg-árnyék: 0 1px 2px # 000;
fényelnyelés. 5;
párnázottság: 3px;
margin-bottom: 5px;
szélesség: 42px;
magasság: 42px;
>
.go-up
.megy lefelé
.go down: lebeg,
.go-up: lebegés opacitás: 1;
box-shadow: 0 5px 0,5em -1px # 666;
>
A fix pozícionálásnak köszönhetően a gombok mindig úgy fognak szólni, és most már csak hozzá kell adni a jQuery szkriptet, amely kattintással gördül az oldal felfelé vagy lefelé:
$ (ablak) .scrollTop ()> = "250") $ ("# ToTop") .fadeIn ("lassú")
$ (ablak) .scroll (függvény () ha ($ (ablak) .scrollTop ()<="250") $("#ToTop ").fadeOut("slow")
else $ ("# ToTop") .fadeIn ("lassú")
>);
ha ($ (ablak) .scrollTop ()<=$(document).height()-"999") $("#OnBottom ").fadeIn("slow")
$ (ablakos) .scrollTop ()> = $ (dokumentum) .height () - "999") $ ("# OnBottom") .fadeOut ("lassú"
else $ ("# OnBottom") .fadeIn ("lassú")
>);
A parancsfájlban szereplő 250 érték mutatja:
- az első sorban - a gomb akkor jelenik meg, ha az oldalt több mint 250 képpont görgette;
- a második, amely eltűnik, amikor az oldal tetejére kerül, kisebb, mint 250 képpont.
Ez mindannyian köszönhetően mindenkinek köszönhetően.
A standard sablonban nem kapcsolódik senkihez, ezért függetlenül kell kapcsolódnia. Én csökkentettem ezt a pontot, mert Azt gondolom, hogy ez érthető, de most úgy gondolom, érdemes frissíteni a cikket, és hozzáadni ezt az elemet. Köszönöm a javítást.
Nem tudom, hogyan kell bemutatni, és van egy számítógép az iskolában volt a több általunk vizsgált alapvető, rajzolt vonal a képleteket, és a szemében egerek nem látni)) Ezért a számítógépes ismeretek tanulás maga, beleértve azt a tényt, hogy a blog. Tehát kényelmes vitathatatlan nyilak. De valójában nem feltétlenül szükségesek, ha tudsz egy apró trükköt (véletlenül felfedezve, mindenütt működik)
Ha a szöveg keretein belül a WHEEL-re kattintasz az egéren (a kép és a link kivételével), akkor a körben "valami" lesz, és az egér mozgatásával felfelé vagy lefelé mozgatva, és néha átlapolódik az oldal. Attól függően, hogy a központtól távolodva tartja-e a kurzort, a sebesség növekszik vagy csökken. Az egyszerű módszer kétségtelen előnye, hogy bárhol és bármikor megállhat. És a nyilak csak a legmagasabbra vagy a legalsó részre.
De természetesen egy jó ember, aki olyan fontos és hasznos információkkal osztozik, amiért sok köszönet neked.
Nos, te! Nem kell bocsánatot kérned, minden, amit helyesen észrevette, de a személyes tapasztalat, azt mondhatom, egy dolog, hogy az „egyszerű” embereknek nem kell a szükséges információt, a kész eredményt: Copy - Paste - örvendeznek. De ez a módszer sok hátránya van, hogy egyszerűen abbahagyta az írást ezeket az álláshelyeket és monoton ismétlődő tartalom, hogy a hálózat már „több mint 99999999999” válaszok, mintha nem volt népszerű.
Aki jQuery kapcsolódik, és valószínűleg mindenhol csatlakozik. A fenébe, hogyan kell megfogalmazni az általános hozzáadásával jQuery leáll albumba jQuery hozzáadása nélkül dolgoztam magát görgetni feladtam ezt a hűvös görgetni szkriptek nem turkálni. És elkezdett tesztelni más lehetőségek javára tenger oldalakat és dühítette nekem, hogy valami rossz görgetés munkák, és ugyanazzal a jQuery, és ez jó is. A tyke és a táncos tambourine módszere minden dollárral helyettesítette a jQuery szót, és minden dolgozott, és a lightbox és a görgetések hozzáadják a könyvtárat.
még mindig azt tanácsolná, hogy a jQ parancsfájlokat egyfajta konstrukcióba helyezzük:
(függvény ($) $ (függvény () // Itt van egy nagyszerű JQUERY SCRIPT
>)
>) (jQuery);
Ami a másodikat illeti, elveszett a találgatás.
Talán igen, nem mondom el. De mondjuk a jQuery Easy plugint, amely elvileg megoldotta ezt a problémát, nem oldotta meg, és csak a fent leírt kódváltozás segített. A fő dolog működik :)