Prilično uobičajena praksa na modernim stranicama je glatko povećanje bloka sa slikom. Kako se to može uraditi sa CSS-om?
Glatko zumiranje slike na CSS-u koji lebdi
Rješenje problema dijelimo u dvije faze: html markup i css stilove. Prvo, označimo blokove sa slikama unutra:
Svim blokovima je dodijeljen klasni okvir. Jedno od njegovih važnih svojstava će biti overflow:hidden, odnosno sakriti sve što ide dalje od bloka. Hajde da uvećamo, hoćemo li? Da. Ali samo dio omeđen blokom bit će vidljiv.
Rastavili smo ovo. Prelazimo na opis stilova.
kutija(
overflow:hidden;
širina: 250px
visina:250px;
}
Sve je bilo po dogovoru - kvadratni blokovi, veličine slične standardnoj, neuvećana slika, također su 250 puta 250.
Svojstvo overflow:hidden, kao što je ranije spomenuto, ne dozvoljava da se ide dalje od bloka prilikom povećanja.
Svojstva vezana za sliku:
Boximg(
-moz-transition: sve 1s ease-out;
-o-transition: sve 1s ease-out;
-webkit-transition: sve 1s ease-out;
tranzicija: sve 1s ease-out;
}
Box img:hover(
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:skala(1.2);
transform:scale(1.2);
}
Nema načina bez CSS3. Sve moderni pretraživači animacija će biti prikazana. Potrebni su nam parametri tranzicije i transformacije. Postavite vrijeme animacije na 1 sekundu (1s). Povećanje će biti 1,2 puta. Možete promijeniti po svom ukusu.
Sada na primjer posao!
Naravno, postoji mnogo načina za povećanje slika. I uglavnom koristi korištenje skripti i dodataka. Po mom mišljenju, takve metode su opravdane u slučaju resursa s velikim brojem fotografija ili bilo koje slike. Moj blog nije takav. I, kao i obično, idem putem najmanjeg utroška vremena, znanja i resursa moje stranice.
Nudim vam način da povećate sliku na stranici bez upotrebe skripti, već samo uz pomoć html-a.
Ovakav način povećanja slike na sajtu omogućiće čitaocu da brzo vidi sliku, jer vaš sajt neće morati dodatno da učitava skripte.
Povećanje slike na sajtu
1 način - povećajte sliku na web lokaciji kada pređete mišem preko
Vrlo jednostavno, dobro najjednostavniji način, iskreno. Morate dodati sljedeći kod u svojstva slike:
Onmouseover="this.style.width="vrijednost širine slike velikih px"" onmouseout="this.style.width="vrijednost širine slike male px""
Kada zadržite pokazivač miša, slika se uvećava.
Nadam se da razumijete da se sve ovo radi u uređivaču teksta.
Metoda 2 - povećajte sliku na web mjestu kada kliknete mišem
Metoda je slična, samo zamijenite onmouseover sa onclick. Sljedeći kod se dodaje svojstvima slike:
Style="width: "vrijednost širine male px slike; border:2px solid black;" onclick="this.style.width=vrijednost širine velike px slike "" onmouseout="this.style.width="vrijednost širine male px slike""
U potpunosti će izgledati ovako
Evo rezultata i koda za sliku sa macom.
Kada kliknete mišem, slika se uvećava na veličinu originalne slike ili veličinu koju ste naveli. Da biste smanjili veličinu, odnosno vratili sliku na originalnu veličinu, jednostavno kliknite bilo gdje na stranici.
Nadam se da vam nije bilo teško koristiti takve metode - koristeći html - za povećanje slike na web stranici.
Općenito, mislim da mnogi webmasteri nisu ograničeni samo na korištenje bilo kojeg motora i primjenu html kodova na svojim stranicama.
Pročitajte također:
2015-10-27T16:07:59+00:00 Hope Skripte i kodovi Povećanje slike na sajtu Povećanje slike na sajtuNaravno, postoji mnogo načina za povećanje slika. I uglavnom koristi korištenje skripti i dodataka. Po mom mišljenju, takve metode su opravdane u slučaju resursa s velikim brojem fotografija ili bilo koje slike. Moj blog nije takav. I, kao i obično, idem putem najmanjeg utroška vremena, znanja i resursa moje stranice. Nudim vam način da povećate...
Nadezhda Trofimova [email protected] Administrator Blog siteMožda će vas zanimati i:
Ukloni iz početna stranica i RSS unosi rubrike
Nastavljamo da poboljšavamo funkcionalnost i izgled site. Uklanjamo nepotrebne unose sa glavne stranice i RSS-a.
mrvice hljeba na wordpress sajtu
Hlebne mrvice na sajtu - šta je to i kako to učiniti?
Kako napraviti senku teksta za 5 minuta
Pozdrav dragi čitaoče mog bloga. U ovom članku ćete naučiti kako da kreirate za 5 minuta sa css stilovi i html kod sjenčani tekst.
Kako napraviti dugme za preuzimanje koristeći css kod
Pozdrav dragi čitaoče mog bloga. Nastavljamo s temom dugmadi. Ovaj članak će govoriti o tome kako napraviti dugme za preuzimanje pomoću css koda.
Kako napraviti dugmad prema dolje za web stranicu
Pozdrav dragi čitaoci. Razmišljao sam, razmišljao sam i odlučio da napišem članak o tome kako lijepo povećati fotografije kada pređete preko nje kursorom miša.
Mojoj radosti nije bilo granica, i to ne zato zanimljiva karakteristika, a ne zato što se detinjstvo igra na jednom mestu :) Hoću da kažem da nisam očekivala ovakav efekat.
Ja sam novi bloger, mlad, početnik. Kancelarijski programi Praktično nisam znao da koristim, a da ne spominjem photoshop. Napravio sam blog, ali se pokazalo da moram učiti od samog dna. Kettle teapot. Sve što sam mogao da uradim je da napravim snimak ekrana u Paintu.
Usuđujem se reći da je bilo nemoguće gledati moje screenshotove bez suza. Ali neočekivano, kada sam eksperimentisao i dodao gadžet na blog, moje fotografije su počele da se igraju, zablistale, zaiskrile jarkim bojama, kao da su oživele i započele novi život, dodale su kontrast.
Efekat glatkog povećanja slika će biti za sve slike na blogu. Slike se ne povećavaju na cijeli ekran, već se glatko kreću naprijed i oživljavaju. Pravi 3D efekat.
Kako instalirati gadget "Smooth Image Zoom on Hover" u Blogger
Glatko povećanje slike kada lebdite kursorom mišaKod se instalira kao običan HTML/JavaScript gadget bilo gdje. Članak "" možete pročitati na mom blogu.
Sada postoji potreba za prelijepim povećanjem slika pri lebdenju. I bez JS! Ali korisnici starijih pretraživača neće vidjeti ništa. Tako da im treba.
Na internetu nisam našao ništa završeno, niti poziciju: koristi se apsolutno ili se sadržaj pomiče, ustupajući mjesto slici, što nije uvijek prihvatljivo.
Pa počnimo. Sve što treba da navedete je da postavite klasu za sliku. Pitaćemo, kao i uvek, posebno za levu, posebno za desnu, a posebno za centar. To je zbog značajke povećanja slike. Na kraju krajeva, ako je slika na lijevoj strani, pri uvećanju bi se trebala pomjeriti udesno, inače će slika otplivati iz pretraživača na malim monitorima.
HTML kod za sliku prikazanu sa leve strane (slika je uvećana, pređite mišem preko slike):
I neki CSS, gdje specificiramo veličinu sličice, lokaciju (s lijeve strane), premotavanje, kao i povećanje slike pri lebdenju:
img .img.left ( float: lijevo ; margina: 5px 15px 5px 0 ; max-height: 320px ; max-width: 320px ; ) img .img.left :hover( transform: scale (2) translate (70px, 30px) ;prijelaz: sve 0 .3s linearno 0.3s ; )
Skoro isto za slike sa desne strane
A CSS se razlikuje samo po položaju sličice (desno) i pomicanju ulijevo kada se zumira:
img .img.right ( float: desno ; margina: 5px 0 5px 15px ; max-height: 320px ; max-width: 320px ; ) img .img.right :hover( transform: scale (2) translate (-69px, 30px ); prijelaz: sve 0. 3s linearne 0.3s ;)
A sada ćemo prikazati sličicu za centar:
img .img.center ( margina: 5px auto ; display: block ; max-height: 320px ; max-width: 320px ; ) img .img.center :hover ( transform: scale (2); prijelaz: sve 0. 3s linearno 0.3s;)
Generaliziranje CSS-a i dodavanje ljepote:
img .img.left ( float: lijevo ; margina: 5px 15px 5px 0 ; ) img .img.right (float: desno; margina: 5px 0 5px 15px ; ) img .img.center ( margin: 5px auto; prikaz: blok ; ) img .img (maksimalna visina: 320px; maksimalna širina: 320px; prijelaz: sve 0. 3s linearni 0s; z-indeks: 1; granica: 1px čvrsta #EEE; pozadina: #FFFFFF; padding: 5px ; ) img .img :hover ( kursor: pokazivač ; box-shadow: 0 0 5px 5px #eee ; granica: 1px solid #25A0E3 ; z-indeks: 10 ; prijelaz: sve 0 . 3s linearno 0. 3s ; ) img .img. lijevo :hover( transform: scale (2) translate (88px , 30px ); ) img .img.right :hover( transform: scale (2) translate (-88px , 30px ); ) img .img.center :hover (transformacija :scale(2); )
Napravio sam kašnjenje u povećanju slike za 0,3 s. Tako da kada pređete mišem preko slike, ona se ne povećava.
Postoji mnogo načina za povećanje slike na web stranici. Pogledat ćemo nekoliko načina za povećanje slika bez upotrebe dodatnih skripti, samo uz pomoć html-a i CSS-a.
Takve metode omogućavaju vam brzi pregled originala, jer nema dodatnog učitavanja skripti, međutim, ako želite otvoriti originalne slike pomoću skripti s prekrasnim efektima, ili kreirati galeriju, preporučujem da obratite pažnju na sljedeće članke:
Napravio sam lirsku digresiju, idemo dalje.
Povećanje slike na sajtu
Prednost je što ne morate praviti posebnu sličicu originalne slike. Ovdje je uključena samo jedna slika
Povećajte sliku web stranice pri lebdenju
Prvi i najlakši način povećanje slike na sajtu je dodati sljedeći kod svojstvu slike između img oznaka:
onmouseover="this.style.width="širina originalne slike u px (ili automatski)"" onmouseout="this.style.width="širina slike u smanjenom prikazu u px""
Odnosno, sa jednim lebdenjem kursora, slika će postati velika.
Kod u cijelosti:
I posljednji najljepši način za zumiranje pri lebdenju pomoću . Ovdje ćemo dodati okvir i opis velikoj slici.
kod:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
  Opis slike. |
Opis slike.
Uvećavanje slike na sajtu klikom
Način zumiranja na klik sličan je prvom načinu zumiranja pri prelasku miša, samo što ćemo umjesto onmouseover koristiti onclick
rezultat:
Kao što vidite, ovdje, da biste povećali sliku, morate kliknuti na nju, a ako uklonite kursor, automatski će se smanjiti.
U sledećoj varijanti povećanje slike na sajtu na klik ćemo koristiti:
Ovdje, da biste smanjili sliku, odnosno vratili je na originalnu veličinu, morat ćete kliknuti bilo gdje na web stranici.
rezultat:
Druga opcija koju možete koristiti je da uvećate sliku klikom na vrh teksta. Ovdje koristimo sljedeći kod:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
Razmotrili smo nekoliko opcija povećanje slike na sajtu: od najjednostavnijih do malo složenijih koristeći html i . Koristite bilo koju od njih na svojim stranicama i bez dodatnih skripti.