Hogyan növelni a képeket a honlapon keresztül javascript és css (zoom)

Home → HTML oktatóanyagok és tippek → Hogyan magasztalja képeket az interneten

A képek az oldalon meglehetősen gyakori, és ezek nagyobb, de a design az oldalon nem mindig lehetséges, hogy azt a teljes formátumban. Ezért kell gondolni oly módon, amely lehetővé tenné számukra, hogy növeljék.

Először is primitív módszerekkel, és befejezni a legjobb módja, hogy növelje a képet.

1. Növelje a kép egy linken keresztül

A legegyszerűbb módja annak nélkül CSS. Csak hogy egy linket egy képet nagy felbontásban.

Magyarázat például:

Az utolsó paraméter nagyon fontos, mert gyakran a tapasztalatlansága a felhasználó találkozhat a következő helyzetet: a nyitó oldalon egy képet, aki nem tudja, hogyan kell térni, és így csak bezárja a fület, majd teljesen elhagyták a webhelyet. A gyógyszert felíró az utolsó paraméter, akkor fedezni egy ilyen esemény, hiszen megnyitja a kezdőoldalt.

Annak ellenére, hogy a könnyű használat, ez a módszer nem a legjobb, mert a nagyobb képhez kell nyitni egy új oldalt, de ez a módszer használható a képek megtekintéséhez minden méretben. Így arra a következtetésre jutunk: ha meg akarja növelni a képek nagyon nagy, ez az egyetlen biztos módja annak, hogy csináld.

2. Automatikusan nagyítja a képet, ha lebeg

A módszer neve is jól tükrözi a lényeg: ha lebeg a kurzort a kép automatikusan zoom. Megvalósítása a módszer az elemi, de megint, ez a módszer hátránya, hogy lehetetlen, hogy végezzen a normál kurzort a kép fölé. Végtére is, ez mindig növeli - ez zavarja a felhasználót.

A következő kód valósítja meg a képessége, hogy automatikusan zoom lebeg:

Magyarázatok például:

• img.zoom - szélességét adja meg a képet, mielőtt a növekedés;
• img.zoom: hover - meghatározza a szélessége a kép után nagyítás (none paraméter azt jelenti, hogy a maximális méret nem szerepel);

3. Kép ​​Kattintáskor

Ez a leggyakoribb és legkényelmesebb módszer bővítésére képeket. És itt vannak sok ways és megvalósításait. Vegyünk néhány legnépszerűbb lehetőségek:

3.1. A növekedés az aktív fókuszpont

Miután egy kattintással a képre, növeli, hanem azért, mert nem csúszik le a szöveget le, így ez a módszer nem a legjobb. Itt egy példa a kódot:

Hogyan néz ki az oldalon:

3.2. A nagyítás a lap tetejére

Az alábbiakban a kód a megvalósításra

Hogyan néz ki az oldalon:

Opciók 3.1 és 3.2 teljesen alapuló CSS-képességeit, és így a „fény”, mint ne töltse be az oldalt felesleges szkripteket. Vannak más lehetőségek, amelyek szintén a CSS, de ők inkább egzotikus. Nem elemzem őket ebben a cikkben, mivel egyes böngészők nem támogatják az ilyen dolgokat.

3.3. szép növekedés

Ez a módszer a legszebb és kényelmes véleményem. Ahhoz, hogy csatlakoztassa egy kicsit trükkös hozzáadásával különböző szkriptek, hogy hajtsák végre lépésről lépésre megnézzük a telepítés:

Az archívum egy képet tartalmazó mappát, két Js fájlt és egy .css.

2) Adjunk hozzá ezeket a fájlokat a honlapon, mivel ezek az archív (vagyis IMG-k mappában kell lennie a könyvtárat, ahol a fájlok .js és .css).

3) Minden oldalon a hely, ahol a nagyítás fogják használni, be kell kapcsolódni SimpleBoxot módszer és stílus:

Azt tanácsolom, hogy adja meg a teljes elérési utat simplebox_util.js. simplebox.css és simplebox.js. hogy könnyen használható minden oldalon.

Ahhoz, hogy ezt a módszert használja, a zoom, használja az alábbi szerkezetet:

Hogyan néz ki az oldalon: