Таны сайт дээрх динамик интерфэйс нь хэрэглэгчдийн анхаарлыг татаж, траффикийг нэмэгдүүлэх болно. Вэбсайтад зориулж хөдөлгөөнт толгой хийх нь нэг харахад хэцүү биш юм.
Зааварчилгаа
1-р алхам
Хулганы курсор дээгүүр эргэлдэж байх үед тохиргоог нь өөрчлөх хөдөлгөөнт толгой хийхийг оролдъё. Жишээлбэл, толгой дээрх хар цагаан зургийг харилцан үйлчлэл хийсний дараа өнгө болгон өөрчилсөн эсвэл өөр зураг болгон өөрчилсөн.
Алхам 2
JQuery номын санг албан ёсны вэбсайтаас (jquery.com) татаж аваад компьютер дээрээ суулгаарай.
Алхам 3
Скриптийн тагийг ашиглан номын санг html файлтайгаа толгойн хаягуудын хооронд холбоно уу.
Алхам 4
Хэрэглэгч толгойтой харьцах үед бие биенээ орлох хоёр зургийг сонго. Хэрэв та хар, цагаан өнгөнөөс өнгөнд шилжихийг хүсвэл зургийнхаа хуулбарыг гаргаж, Photoshop дээр цөхрүүлээрэй.
Алхам 5
Html-баримт бичигт хоёр зүйлийн жагсаалтыг гаргаж, зургийн шошгыг ашиглан тус бүрт зураг хавсаргана уу. Жишээлбэл, жагсаалтад өөрөө хэв маягийн ангийг хэрэглэ
Алхам 6
Үүнийг сайтынхаа толгой хэсгийг хариуцдаг div дээр хий. Нэгдүгээрт, статик төлөвт тусгах ёстой зургийн хаягийг зааж өгөөд, дараа нь hover дээр гарч ирнэ.
Алхам 7
Эхний зураг дээр class = "pervaya", хоёр дахь зурагт анги: "vtoraya" нэмнэ.
Алхам 8
Хавсаргасан css файлд эдгээр ангиудын элементүүдийн үнэмлэхүй байршлыг (байрлал: үнэмлэхүй;), тогтсон өндөр ба өргөн (өндөр ба өргөн) -ийг зааж өгнө.
Алхам 9
Зургийг бие биен дээрээ давхарлаж тавь. Үүний тулд z индексийн хэв маягийг ашиглаарай. Энэ нь дэлгэцийн гүнд биднээс холдох z-тэнхлэгийн дагуу элементүүдийг зэрэгцүүлэх боломжийг олгоно.
Алхам 10
Жагсаалтын хувьд шаардлагатай догол мөр, тохируулгыг зааж, жагсаалтын зүйлийг хас (жагсаалтын хэв маягийн төрөл: none;).
Алхам 11
. Js файл үүсгээд дараах кодыг оруулна уу:
$ (документ). бэлэн (функц () {
$ ("img.grey"). hover (функц () {
$ (this).stop (). animate ({"opacity": "0"}, "удаан");
}, функц () {
$ (this).stop (). animate ({"opacity": "1"}, "удаан");
});
});
Алхам 12
Энэ код нь таны толгойг хөдөлгөөнд оруулах болно.. Js файлыг html баримт бичигт холбохоо бүү мартаарай.
