Butoane și o parcurgere netedă în sus și în jos a paginii.
Acest articol prezintă un exemplu simplu și foarte elegant de implementare a butoanelor "Sus" și "Jos" fără a folosi imagini și o variantă a unui mic jQuery script pentru derularea netedă a paginii în direcția specificată.
Modul este bun, deoarece inițial atunci când pagina este în sus, butonul "Sus" este ascuns, când este derulat în jos - butonul "Jos" este ascuns, parametrii de înălțime la care apar butoanele sunt ajustați.
DEMO
Deci, codul HTML pentru butoane arată astfel:
Pentru a implementa indicatorii de direcție pentru derulare - săgeata, sunt folosite caractere speciale unicode, care sunt copiate și lipite pur și simplu în interiorul etichetei. Această abordare vă permite să faceți fără a utiliza imagini, adăugând un plus la optimizare și, de asemenea, vă permite să configurați cu ușurință și, dacă este necesar, să schimbați repede aspectul butoanelor.
Atunci când utilizați caractere speciale speciale în proiectarea elementelor site-ului, trebuie să efectuați două verificări:
1) verificați codarea paginii web - trebuie să fie UTF-8;
2) bifați acest simbol pentru compatibilitatea cu browserul încrucișat - fie că este afișat în toate browserele, uneori nu este;
Codul HTML este plasat acolo unde este convenabil în șablon, aspectul și aspectul butoanelor este setat în CSS (codul de stil de pe pagina demo):
du-te-up. afișare go-down: nici una;
poziție: fixă; / * poziționare * /
z-index: 9999; / * peste toate elementele de pe pagina * /
drept: 15%; / * poziția pe pagină, dacă este stânga - stânga * /
fundal: # 4F4F4F;
frontieră: 1px solid #ccc;
raza de graniță: 5px;
cursor: pointer;
culoare: #fff;
text-align: centru;
font: normal normal 42px / 42px sans-serif;
text-shadow: 0 1px 2px # 000;
opacitate. 5;
padding: 3px;
margin-bottom: 5px;
lățime: 42px;
înălțime: 42px;
>
.go-up
.antrepozit
.du-te jos: hover,
.go-up: opacitatea hover: 1;
box-shadow: 0 5px 0.5m -1px # 666;
>
Datorită poziționării fixe, butoanele vor fi, ca să spunem așa, mereu la îndemână și acum rămâne doar să adăugăm scriptul jQuery, care, făcând clic, va derula ușor pagina în sus sau în jos:
$ (funcția () dacă ($ (fereastra) .scrollTop ()> = "250") $ ("# ToTop"
$ (fereastră) .scroll (funcția () dacă ($ (fereastra) .scrollTop ()<="250") $("#ToTop ").fadeOut("slow")
altfel $ ("# ToTop") .fadeIn ("lent")
>);
dacă ($ (fereastra) .scrollTop ()<=$(document).height()-"999") $("#OnBottom ").fadeIn("slow")
$ (Fereastră) .scroll (funcția () în cazul în care ($ (fereastră) .scrollTop ()> = $ (documentul) .height () - "999") $ ( "# OnBottom") .fadeOut ( "lent")
altceva $ ("# OnBottom") .fadeIn ("lent")
>);
O valoare de 250 în scenariu arată:
- în prima linie - butonul va apărea atunci când pagina este derulată cu mai mult de 250 de pixeli;
- în a doua, care dispare atunci când în partea de sus a paginii va fi mai mică de 250 de pixeli.
Asta-i tot pentru moment, mulțumită tuturor pentru atenția ta.
În șablonul standard, nu este conectat la nimeni, trebuie conectat independent. Am coborât acest punct, pentru că Cred că este de înțeles, dar acum cred că merită actualizarea articolului și adăugarea acestui articol. Vă mulțumim pentru corecție.
Nu știu cum să prezinte, și am un calculator la școală a fost cu atât mai mult am studiat de bază, linia trasată prin formulele, și în ochii șoarecilor nu au văzut)) Prin urmare, învățarea de alfabetizare de calculator în sine, inclusiv faptul că pentru blog. Deci, sunt săgeți convenabile indiscutabile. Dar, de fapt, ele nu sunt cu adevărat necesare atunci când știi un truc mic (descoperit accidental, funcționează peste tot)
Dacă apăsați mouse-ul rotiță de oriunde în text (cu excepția imaginilor și link-uri), va exista „ceva“ într-un cerc, iar atunci când se deplasează mouse-ul în sus sau în jos, și, uneori, în partea laterală a paginii este rebobinat. În funcție de cât de departe vă deplasați cursorul, centrul crește sau scade. Avantajul fără îndoială al acestei metode simple este că puteți să vă opriți oriunde și oricând. Și săgețile numai la partea superioară sau chiar la fund.
Dar, cu siguranță, sunteți un coleg care vă împărtășește informații atât de importante și utile, pentru care vă mulțumesc foarte mult.
Ei bine, tu! Nu este nevoie să-mi cer scuze, tot ce ați observat în mod corect, dar din experiența personală pot spune un singur lucru, că „simplu“ oamenii nu au nevoie de informațiile de care au nevoie rezultatul final: Copy - Paste - se bucure. Dar această metodă are o mulțime de neajunsuri, în care pur și simplu am încetat să mai scriu aceste posturi și de conținut duplicat monotone că rețeaua este deja „peste 99999999999“ răspunsuri, ca și în cazul în care nu a fost popular.
La cine jQuery este conectat, și este conectat deja peste tot probabil. Fir-ar cum să formuleze general, prin adăugarea de jQuery să nu mai funcționeze lightbox; jQuery fără adăugarea am lucrat el însuși derula am renunțat la acest misto am derula script-uri nu scotocire. Și am început să testez alte opțiuni în beneficiul siturilor mării și m-am înfuriat că aici sunt niște lucrări slabe de defilare și folosind același jQuery și acest lucru nu este răcoros. Metoda de dans și dans cu o tamburină a înlocuit toate dolari $ cu cuvântul jQuery și totul a lucrat și lightbox și scroll adăuga biblioteca nu are nevoie
ar recomanda în continuare script-urile jQ să fie plasate într-o construcție de tip:
(funcția ($) $ (functie ()) AICI UN SINGURA SCRIPT JACKER
>)
>) (jQuery);
În ceea ce privește al doilea, m-am pierdut în conjectură.
Poate că nu vă spun. Dar să presupunem că pluginul jQuery Easy, care teoretic trebuia să rezolve această problemă, nu a rezolvat-o și numai schimbarea de cod descrisă mai sus a ajutat. Lucrul principal lucreaza :)
Trimiteți-le prietenilor: