A szkript kurzormozgás
Jó napot 🙂
Nemrégiben, az szeme megakadt egy érdekes forgatókönyvet. Sokan látták. A lényege a forgatókönyvet abban a tényben rejlik, hogy egy objektum mutat a helyét a kurzort az oldalon. Ezt a hatást használják olyan helyeken uCoz oldalon 404. Ott történik, hogy amikor a kurzor mozgását, festett macska, távcsővel figyelte a mozgását. Valójában ez a szkript egyszerűen gyönyörű animáció, hogy vonzza a látogató figyelmét. Tetszett nagyon, és úgy döntöttem, hogy egy kicsit módosítani, és hogy egy másik nagyon hasonló, de kicsit más animált.
Ebben a cikkben az első megjelenő animációt, és a következő megmondja semmit a második. Lesz egy mutató egy iránytű. Vettem a forgatókönyvet egy kicsit az ő korrigált, és megváltoztatta az elvet a kimenő képet. Tehát ahelyett, hogy egy macska keresett távcsővel, tettem hozzá a híres macska - Simon Simon Cat rajzfilm. Ahogy a forrás azt sugallják, hogy ezt a forgatókönyvet oldalakon, mint például a 404 Természetesen minden attól függ, a fantáziádat. Akkor alkalmazkodjon milyen más célra. Mi jön a telepítés után a honlapon ez az anyag, akkor láthatjuk az alábbi példát, valamint letölthető a forrás.
Tetszik? Ha igen, folytassa a leírást, hogyan működik és hogyan kell hozzáadni a webhelyen.
Először is, tegyük hozzá a HTML-forrás a mi animáció.
Szerint a jelölést, ez egyszerű. Van szülői egység id - kat. Belül két blokk felelős a szem, amelyen belül a felelős blokkokat a diákok számára. Kiderült, mi határozza meg minden kedves macska, akkor a két zóna, azaz a szem környékét, amelyen belül, és mozog a diákok. Ezt a kódot adunk a hely, ahol a honlapon szeretnénk látni egy képet animációt.
A következő lépés az, hogy adjunk stílust megfelelően megjeleníteni a jövőben az animáció.
Ha tudsz valamit a CSS, hogy minden egyszerű, és remélem, hogy ez így van, mert ha úgy dönt, hogy adjunk a saját scripteket a helyén, akkor legalább megtanulni és megérteni elemi, elemi fogalmak. Ellenkező esetben azt javasoljuk, hogy először megtanulni az alapokat, és csak ezután foglalkozik az ilyen módosításokat a webhelyen. Térjünk vissza az anyagot.
Fontos megjegyezni, hogy a háttérben egy macska kap az: mielőtt a #cat blokk. Meg kell adnia a helyes utat, hogy a képet. Ahhoz, hogy az összes kép - töltse le a forráskódot a fenti linkre. Most, a szemek és a diákok.
- #cat - alapegység, egy olyan területen, ahol nem lesz képek és animációk szemét.
- #cat: mielőtt - új pszeudo általános háttér. Ebben az esetben, a macska Simon. Akkor egy újabb képet, de aztán helyesen kell helyezni a régió szeme rajta.
- .macskaszem - Ez egy általános osztályt a két szem számára (nincs kép, de ez egy olyan terület a tanulók). Méretének beállítása ami fut a tanuló. Ebben a helyzetben -60x61px
- .cat-szemgolyó - Már maguk a tanulók. Pozícióját a szem, a méret és a legfontosabb pontokat az utat a képet - eyes.png. Ha a képek nem hazudnak ugyanabban a könyvtárban, mint a stílus, adja meg a helyes utat.
- # Cat-eye-bal és # cat-eye-right - azonosítót a bal és a jobb szem számára. Hely a zónák mozgását a diákok. Ha megváltoztatja az alapvető képet, majd ezeket a paramétereket meg kell változtatni pozícióját a szülői egység - #cat
Most jött a fordulat a forgatókönyvet, de ez a munka akkor először meg kell jQuery könyvtár. Ha ez kapcsolódik, akkor ez a lépés kihagyható. Mivel ez az alapértelmezett rendszerek, ha a helyén kell keresni samopisny. Ha még mindig nem, akkor meg kell adni azt. ez történik, vagy a fejlécben vagy a láblécben, hozzátéve ezt a sort:
Ha hozzáadott egy könyvtár a fejléc, a forgatókönyvet kell lennie a pincében. Ha a könyvtár is a pincében, miután hozzátéve, hogy egy ilyen kód:
A festék a szkript nem fog működni, fogok figyelni csak néhány pontot. Az első - ez az első két sorban. Ezek felsorolása Haydee balra és jobbra akna. Ha átnevezi őket stílusok és HTML, meg kell csinálni a forgatókönyvet.
A második - területe a kurzor követés. Ebben a script 7 bar Set - html. Ez tulajdonképpen az egész oldalt. Előfordul, hogy egy testet. De ha az oldal nem teljes, és a pincében nem tűzve az az oldal alján, akkor előfordul, hogy a test csak egy fél oldalt, és azt meghaladó, a szkript nem fog működni, így a legjobb - html. Beállítható egy adott blokk, amelyen belül követi a kurzort, miközben a többi oldal, ez nem fog megtörténni. Ebben az esetben a HTML helyett meg kell adnia Haydee egység, például #block_name. Helyezzük a HTML kódot ezt a cikket az egység Haydee - #block_name minden.
Ez minden, amit kell telepíteni ezt a forgatókönyvet, hogy a webhelyen. Amint az elején, a szkript nem terem sok jó létezik, csak így webhely szokatlan megjelenésű.
Ez minden, köszönöm a figyelmet. 🙂
Ha hasznos volt a munkámhoz, támogatni tudja a helyszínen :)
Szia kedves barátom
Van AdBlock telepített bővítmény vagy hasonlók. Add oldalamon a fehér listát, és így vnesesh hozzájárulnak kialakulásához. Arról, hogy hogyan tiltsa AdBlock szeretné ezt az ablakot