Cum sa faci un cursor pe css si html, fara javascript

slider de comutare simplă cu cadre animate

Notă: În acest exemplu, mă voi concentra pe cele mai noi caracteristici CSS. Codul nu este proiectat pentru a lucra în browsere mai vechi.

Pentru a începe crearea unui cursor cu acest cod:

slider containere - div class cu sliderA. Fiecare cadru al glisorului descris etichetele tromya:

• Buton radio (input type = "radio"), responsabil pentru starea cadrului (vizibil / non-vizibile)
• Pentru a eticheta. responsabil pentru afișarea butoanelor de navigare pe cursor.
• tag Div în care conținutul cadrului.

A început peste stiluri. recipient:

Cerem dimensiunile fixe ale containerului. Am stabilit-le egală cu dimensiunea imaginilor pe care le voi folosi în acest exemplu. Poziția de proprietate: relativă este necesară stabilirea unei noi poziții punct de referință de containere imbricate. Proprietatea text-align: centru am adăugat, pentru a centra banda de butoane, etichete pe care le va fi poziționat ca elemente inline.

Afișează butoane radio nu avem nevoie pentru a le ascunde:

Facem butonul etichete. Codul mult, dar nimic complicat:

Am stabilit afișajul de proprietate: inline-bloc. care va plasa o etichetă pe o singură linie și să le aliniați la mijloc ca elemente inline, și în același timp, le cere o dimensiune fixă ​​ca un bloc. Apoi am stabilit lățimea și înălțimea, precum și raza de colț, culoarea de fundal și culoarea de frontieră. Toate acestea conduc la faptul că etichetele noastre sunt prezentate sub forma unor mici butoane rotunde.

cursor vă permite să setați aspectul cursorului mouse-ului atunci când situându-se deasupra butonului. Am stabilit valoarea indicatorului. și anume de indicatorul mouse-ului va fi la fel ca atunci când treceți peste un link ( „deget“).

proprietate a indexului z este necesar situată în partea de sus a cadrului de glisor pentru a-buton marca. Pentru același set de poziție proprietate: relativă - în caz contrar z-index nu va funcționa.

marja de-dreapta, adaugă padding între butoanele și partea de sus: 90% le mută în partea de jos a containerului. Ai putea seta poziția verticală a butoanelor mai inteligent, dar aici mă voi limita în acest fel.

Am stabilit, de asemenea, culoarea de fundal a butonului apăsat și butoanele, care se mișcă mouse-ul. Proprietatea determină animație de tranziție pentru a schimba fundalul.

De asemenea, ar trebui să eliminăm toate spațiile și pauze de linie între etichetele glisorului, ca folosind display: inline-bloc, ei ne vor da spații suplimentare între taste. Așa că am făcut-o în articolul precedent. Acum, eu nu am făcut acest lucru pentru a simplifica perceperea de cod HTML.

Rezultatul este un astfel de cursor gol:

Adăugarea de stiluri pentru div-uri, în care conținutul cadrului va fi:

Toate cadrele vor ocupa aceeași poziție. Poziția: absolută permite de a elimina blocuri din fluxul și departe de arbitrar. top. la stânga. dreapta. cadru inferior coordonatele stabilite, astfel încât rama ocupă întregul glisorul container în întregime. indexului z trimite cadre cu cadru buton de comutare, în caz contrar nu putem vedea aceste butoane, fie, nu apăsați.

Acum, cea mai importantă parte a cursorului - afișarea sau ascunderea cadrului, în funcție de butonul apăsat. Abordarea tradițională a ascunde elemente de pagină, utilizând proprietățile de afișare: nici unul noi nu se potrivesc destul. La urma urmei, pentru cursorul ar dori să facă o schimbare lină a personalului, dar CSS nu permite să se stabilească valoarea de afișare a animației folosind regulile de tranziție.

Pentru ascunde moale și aspectul de personal avem nevoie de două proprietăți: opacitate și vizibilitate; și tranziția menționată.

opacitate proprietate vă permite să specificați un nivel zecimal de transparență a elementelor de pagină, de la 0 (complet transparent) la 1 (complet opac). De exemplu, opacitatea: 0.5 - opacitatea la 50%.

Dar chiar și elementul complet transparent, deși invizibilă, continuă să răspundă la clicurile pe butoane. Prin urmare, dacă sunteți în link-ul cursorul, faceți clic pe link-ul poate declanșa nu un mod de link-uri, care este vizibil pe ecran.

Pentru a elimina complet elementul și să-l transparent pentru clicuri de mouse, acesta va lua oa doua proprietate: vizibilitate: ascuns. Cu toate acestea, vizibilitatea nu este permite setarea de transparență parțială. Element de orice vizibile sau nu.

Prin urmare, vom folosi pentru a anima tranziția ambele proprietăți pentru a obține efectul dorit noi. Esența metodei este următoarea:

• Atunci când un utilizator comută cadru, un nou cadru apare vizibilitate: vizibil. dar cu opacitate: 0.
• Apoi opacitatea animație valori în ambele cadre. Cadrul vechi scade lin la zero, iar noul - se ridică treptat la unitate.
• După finalizarea animației, vizibilitatea cadrului vechi este setat pe ascuns. astfel încât să nu interfereze cu mouse-ul pe noul cadru.

Iată un cod ce am:

Am adăugat, de asemenea, o regulă pentru tag-ul p interiorul cadrului pentru a face legende pentru imagini:

Slider-HTML atașează codul pentru exemplul nostru:

Și aici vom obține următorul rezultat:

Răsărit de soare deasupra insulei

slider de comutare simplă cu cadre animate, al doilea exemplu de realizare

Cursorul poate fi plasat ca fotografiile uzuale și orice text link-uri către alte pagini de pe site-ul dvs. și așa mai departe.

În cazul în care utilizați cursorul pentru a se potrivi imagini simple (de exemplu, esti un turist, și publicați fotografii din călătoriile tale), există o dorință de a îmbunătăți cursorul, astfel încât să faceți clic pe un cursor care duce la trecerea la următoarea imagine. În exemplul anterior, cadrele de culisare sunt activate numai butoanele rotunde și apăsând pe imaginea în sine nu face nimic.

Usovershestvuem cursorul nostru. Șablonul slider adaugă unul mai etichetă pentru fiecare cadru:

După cum puteți vedea, eticheta vine după primul cadru, al doilea cadru activează. Tag situat după al doilea cadru activează al treilea cadru; după a treia - chertvorty. Ultima etichetă activează primul cadru.

Etichetele am loc, astfel încât acestea să acopere întregul glisorul și situată deasupra imaginii, dar butoanele de mai jos banda. Tag-uri transparente, astfel încât acestea să poată fi văzute prin conținutul cadru. Atunci când o imagine este afișat un număr N cu el marca este afișat pentru a trece la cadrul N + 1. (Pentru ultimul cadru. - tag-ul de tranziție de pe primul cadru)

Astfel, atunci când utilizatorul face clic pe imagine a declanșat activarea următoarea imagine. rezultat:

Răsărit de soare deasupra insulei

Cum de a crea o imagine de sine se schimbă ca o succesiune de imagini?

Ca un boboc care nu funcționează am un cursor, verificat nu trece

Este posibil să se utilizeze div INPUT vmete. de exemplu, atunci când vă mutați unitatea de la o parte în continuă schimbare de imagine?

Am copiat totul este exact, dar nu am putut obține cursorul. In partea de sus și 5 pixeli vertical, dedesubt 5 grafica inserată pur și simplu. Cum de a stabili? Sau poate, în plus, că este necesar să se scrie?