Schimbarea imaginii netede Javascript

Evaluare: 5/5

Un element comun în designul paginilor web este schimbarea netedă a imaginilor. Există mai multe abordări pentru punerea sa în aplicare. Puteți utiliza animația GIF. În același timp, pentru a asigura o bună netezime, este necesar să folosiți mai multe cadre.







O altă caracteristică a scenariului este că, pe lângă schimbarea netedă a imaginilor, fiecare imagine poate fi o legătură cu resursele sale. Câte poze - câte link-uri către diferite resurse. Puteți să-l verificați! O alternativă interesantă la bannere?

Schimbarea imaginii netede Javascript
Schimbarea imaginii netede Javascript
Schimbarea imaginii netede Javascript






Schimbarea imaginii netede Javascript

Imaginea arată cum funcționează scriptul. Numărul de imagini interschimbabile, timpul de afișare al fiecărui cadru și timpul de tranziție sunt ușor de schimbat.

Vopsirea netedă a imaginii este implementată în funcția ChangeImage (). Pe linia 93, se creează un timer cu identificatorul play_id. Apelarea acestei funcții cu intervalul time_show. Valoarea start = 0 corespunde activității cronometrului. Dacă pierdeți concentrarea a ferestrei de browser (mutat într-o altă filă, chiar și la o altă aplicație) timer play_id se oprește linia 78. Valoarea start = 1 corespunde unui „somn“ timer. Când reveniți focalizarea la fereastra browser-ului începe o linie cronometru 86.

Prima dată când timerul play_id este rulat pe linia 93 și nu pe 86 deoarece în browserele Google Chrome. Opera și Safari imediat după încărcarea paginii, manipulatorul window.onfocus nu este sunat și schimbările de imagine nu apar.

  • după ce ați pierdut și ați revenit la focalizare (ați trecut la o altă filă a browserului, într-o altă aplicație și apoi ați revenit la această pagină), imaginile se vor schimba inițial repede "sărind" unul pe celălalt
  • pentru plasarea pe o singură pagină a mai multor blocuri de imagini fără probleme și, dacă nu sunteți un programator, există dificultăți

Aceste dezavantaje sunt o metodă de utilizare CSS - articol dizolvă imagini CSS3 partea 1 și tranziția lină a imaginilor CSS3 partea 2. Există, de asemenea, considerat unul dintre efectele unei schimbări de imagine buna - schimbare de rotație.







Trimiteți-le prietenilor: