Az emelkedés hatása az egérrel a jQuery
Fő nézet - Piggy fejlesztő. Minden, ami a tervezés, fejlesztés és területek létrehozása
Fő View - blog design, web design és webfejlesztés. Ha a fejlődő weboldalak, vagy érdekli a web design és a design csak a dolgok körülöttünk, vagy egyszerűen csak érdeklődik a téma a web design és webfejlesztés, ez a blog lesz, hogy nagyon hasznos. A blog megtalálható cikkek, értékelések, útmutatók és még sok más.
Valószínűleg sokan szembesülnek azzal a feladattal, ami egy érdekes hatása, ha lebeg a kurzort a kép fölé. Persze, van egy csomó különböző hatások felélénkíteni a helyén annak a ténynek köszönhető, hogy a felhasználó látja a tetteikért válaszolni. Nemrég kellett alkalmazni a hatás növekszik, ha a kurzor. Azt hittem, hogy ennek megvalósítása a hatás érdekesek lehetnek az Ön számára.
Hogyan néz ki
Ez hogy működik
Kezdeni, mint mindig meghatározza miniatűrök, és hozzon létre egy tartályt, amely tartalmazni fogja a képet. Azért választottam ilyen méretek: miniatűr normális formájában a mérete 150x150 pixel, és ha az egérmutató megváltozik a mérete 250x250 képpont. Szándékosan választottam egy nagyszabású érdekében, hogy mutassa meg a munkát a hatást. Tény, hogy jobb, ha a különbség nem túl nagy, hogy a hatás nézett simábban.
Tehát a szerkezet:
Ezt követően meg kell rendelni a CSS-szabályok az egyes elemek. A mi feladatunk az, hogy létrejöjjön a CSS bélyegképek egy vízszintes vonal. Anélkül, CSS szabályok Előnézetek függőleges Idna a másik után.
Adjuk hozzá a következő kódot:
E lépés után megkapjuk a kívánt elrendezést és megjelenése a miniatúrák. Mi befejezni az üzlet, hozzátéve jQuery funkcionalitást. A kód nagyon egyszerű, és elmagyarázni a munkáját, azt hiszem, ez nem szükséges. Készítünk két funkció események kezelését útmutatást és elveszti fókusz az egér kurzor.
Kód hozzáadása az oldalt a címke rész
Remélem nem felejtettem Plug jQuery könyvtár maga előtt.
Teljesítése funkcióit nem csak átméretezi a képet, hanem, hogy kiszorítsa őt. Amint azt tolódnak vízszintesen és függőlegesen 50 pixel. Ha más méretben, meg kell számítani az Ön esetében az új értéket ezek az elmozdulások. Például, ha a képekre az eredeti mérete 100x100 pixel, és növeli őket, hogy 200x200 pixel, a offset definiálható (200-100) / 2 = 50 pixel. Ebben az esetben ez egybeesett az én elfogultság, de más értékek, természetesen más lesz.
Ez az egész megvalósítása a hatása, hogy növeli a kép egérráhelyezéskor. Remélem, hogy ez a bemutató hasznos lesz az Ön számára. Köszönöm a figyelmet.
Maradjon kapcsolatban
Ha elolvassa ezt a weboldalt, akkor beleegyezik a cookie fájl. Ellenkező esetben hagyja a helyén. Egyetértek