Saytınızdakı dinamik bir interfeys istifadəçilərin diqqətini cəlb edəcək və trafiki artıracaq. Bir veb sayt üçün cizgi bir başlıq yaratmaq ilk baxışdan göründüyü qədər çətin deyil.
Təlimat
Addım 1
Siçan imleci üzərinə fırlandıqda konfiqurasiyasını dəyişdirəcək cizgi bir başlıq yaratmağa çalışaq. Məsələn, bir başlıqdakı qara-ağ şəkil qarşılıqlı təsir nəticəsində rəngə çevrildi və ya başqa şəkilə dəyişdirildi.
Addım 2
JQuery kitabxanasını rəsmi veb saytından (jquery.com) yüklədikdən sonra kompüterinizə quraşdırın.
Addım 3
Skript etiketini istifadə edərək kitabxananı html dosyanızla baş etiketlər arasında əlaqələndirin:
Addım 4
İstifadəçi başlıqla qarşılıqlı əlaqədə olduqda bir-birini əvəz edəcək iki şəkil seçin. Qara və ağdan rəngə keçid etmək istəyirsinizsə, şəklin bir nüsxəsini yaradın və Photoshop-da doymuş edin.
Addım 5
HTML sənədində iki maddənin siyahısını yaradın və şəkil etiketindən istifadə edərək hər birinə şəkillər əlavə edin. Məsələn, siyahının özünə bir stil sinfi tətbiq edin
Addım 6
Bunu saytınızın başlığından məsul olan div-də edin. Əvvəlcə statik vəziyyətdə əks olunmalı olan görüntünün ünvanını, sonra isə hoverdə görünən yeri göstərin.
Addım 7
Birinci şəklə class = "pervaya", ikinci şəkilə sinif: "vtoraya" əlavə edin.
Addım 8
Əlavə edilmiş css sənədində bu siniflər üçün elementlərin mütləq yerləşdirilməsini (mövqe: mütləq;), sabit hündürlüyü və enini (hündürlüyü və eni) göstərin.
Addım 9
Şəkilləri üst-üstə qoyun. Bunun üçün z-index stilindən istifadə edin. Ekranın dərinliyində bizdən uzaqlaşan z oxu boyunca elementləri düzəltməyə imkan verir.
Addım 10
Siyahının özü üçün lazım olan girintini, hizalamasını göstərin və siyahı elementlərini silin (list-style-type: none;).
Addım 11
Bir.js faylı yaradın və aşağıdakı kodu yapışdırın:
$ (sənəd). hazırdır (function () {
$ ("img.grey"). hover (funksiya () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, funksiya () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Addım 12
Bu kod başlığınızı hərəkətə gətirəcəkdir.. Js faylını html sənədinə bağlamağı unutmayın.
