A nagyítás kattintásra

előző ◈ a következő

Több mint egy évvel ezelőtt írtam egy cikket arról, hogyan lehet végrehajtani a zoom kattintva JQuery. Azóta sokat tanultam és sokat tanultam, és ahogy elkezdtem úgy tűnik, nem optimális, nem szép, ezért kellett a vágy, hogy írjon több modern forgatókönyvet.

Így a lényege az ötlet - a forgatókönyvet kell dolgozni minden olyan képet, amely az osztály minimalizálni az oldalon, nem kell semmilyen rejtett elemeket (miért telezsúfol az oldal kódja), és a kép jelenik meg a képernyő közepén.

Az utolsó példában a kimenő képet egy rejtett

. melyet az oldal közepére CSS segítségével. Most a logika ugyanaz, de a megvalósítás egészen más:

  1. képeket szeretnénk növelni, minimalizálni kell osztályba tartoznak;
  2. ha rákattint a képre a zárás előtt lesz hozzá
    magasztalja az osztálynak, hogy fog megjelenni a kép, és az oldal közepére, és
    overlay osztályban. sötétedő háttér
  3. ha rákattint a bezárás gombra vagy sötétíti a háttérben, akkor be kell zárni a nagyított képet, és távolítsa el a hozzáadott elemeket

Kezdjük. Először megjelenik egy kép:

/ * A kép az oldalon * /

határon. 1px szilárd #fff;

határon. 1px sárga színű, szilárd;

határon. 1px szilárd #AFAFAF;

háttérben. url (http //codernote.ru/files/cross.png.) no-repeat center center;

background-méret. 16px 16px;

animáció. rota 4s végtelen normális;

$ ( '.minimized). kattintson (function (event)

var i_path = $ (this). attr ( 'src');

$ ( 'Body). append ( "

A nagyítás kattintásra
„);

maradt. ($ (Document) szélessége () -. $ ( '#magnify') outerWidth ().) / 2.

tetején. ($ (Window) magasság () -. $ ( '#magnify) outerHeight ().) / 2

$ ( '#overlay, #magnify'). fadeIn ( 'gyors');

Kösz a cikket. Csak úgy döntöttem, hogy a webhelyen hasonlók. Ha elfelejtette itt azt mutatják, hogy ahelyett, hogy $ (document) .height () kell használni $ (ablak) .height (), különben a kép lefelé mozog a pampák. És #magnify pozícióját adja meg: fix;

Kapcsolódó cikkek

előző ◈ a következő