Kiolesura chenye nguvu kwenye wavuti yako kitavutia watumiaji na kuongeza trafiki. Kutengeneza kichwa cha uhuishaji kwa wavuti sio ngumu kama inavyoonekana mwanzoni.
Maagizo
Hatua ya 1
Wacha tujaribu kutengeneza kichwa cha uhuishaji, ambacho kitabadilisha usanidi wake wakati mshale wa panya unapoelea juu yake. Kwa mfano, picha nyeusi na nyeupe kwenye kichwa ilibadilishwa kuwa rangi juu ya mwingiliano au kubadilishwa kuwa nyingine.
Hatua ya 2
Sakinisha maktaba ya jQuery kwenye kompyuta yako baada ya kuipakua kutoka kwa wavuti rasmi (jquery.com).
Hatua ya 3
Unganisha maktaba na faili yako ya html kati ya vitambulisho vya kichwa ukitumia lebo ya hati:
Hatua ya 4
Chagua picha mbili ambazo zitabadilishana wakati mtumiaji anaingiliana na kichwa. Ikiwa unataka kuwa na mabadiliko kutoka nyeusi na nyeupe hadi rangi, kisha uunda nakala ya picha hiyo na uifute picha kwenye Photoshop.
Hatua ya 5
Unda orodha ya vitu viwili kwenye hati ya html na ambatanisha picha kwa kila mmoja ukitumia lebo ya picha. Tumia darasa la mtindo kwenye orodha yenyewe, kwa mfano
Hatua ya 6
Fanya hivi kwenye div ambayo inawajibika kwa kichwa chako cha wavuti. Kwanza, taja anwani ya picha ambayo inapaswa kuonyeshwa katika hali ya tuli, na kisha ile inayoonekana kwenye hover.
Hatua ya 7
Ongeza class = "pervaya" kwenye picha ya kwanza, na darasa: "vtoraya" kwa picha ya pili.
Hatua ya 8
Kwenye faili ya css iliyoambatanishwa, taja nafasi kamili ya vitu (nafasi: kabisa;), urefu uliowekwa na upana (urefu na upana) kwa madarasa haya.
Hatua ya 9
Weka picha juu ya kila mmoja. Tumia mtindo wa z-index kwa hii. Inakuruhusu kupangilia vitu kando ya mhimili wa z, ambao huenda mbali nasi kwa kina cha skrini.
Hatua ya 10
Kwa orodha yenyewe, taja ujazo, mpangilio unaohitaji na uondoe vitu vya orodha (orodha-mtindo-aina: hakuna;).
Hatua ya 11
Unda faili ya.js na ubandike nambari ifuatayo ndani yake:
$ (hati) tayari (kazi () {
$ ("img. kijivu"). hover (kazi () {
simama (). hai ({"opacity": "0"}, "polepole");
}, kazi () {
simama (). hai ({"opacity": "1"}, "polepole");
});
});
Hatua ya 12
Nambari hii itahuisha kichwa chako kitende. Usisahau kuunganisha faili ya.js kwenye hati ya html.
