Добрий вихідний, шановні читачі, новачки в веб програмуванні і просто програмісти! Вирішив сьогодні поділитися однієї простої темою, але цілком цікавою для новачків, а можливо просто хтось задумається застосувати рух блоків JQuery у себе на сайті. В принципі, як я вже згадав вище, нічого складного немає, але просто сам принцип переміщення блоків мені припав до смаку і вже знайшов місце для його застосування.
Крок перший. HTML. Підключення стилів і скриптів.
Відразу ж переходимо до підключення бібліотеки JQuery. стилів CSS. а також, власне, самого скрипта movedivjquery.js.
Перед тим як приступити до розгляду коду JQuery. нам потрібно створити блок, який ми зможемо переміщати по області браузера. Для цього створюємо контейнер з ідентифікатором block. Більше, в принципі, крім як заповнити інформацією, нічого робити тут не потрібно!
Тепер переходимо до кнопок, за допомогою яких, ми зможемо управляти самим блоком. Створюємо контейнер для кнопок, щоб надати стилізацію за допомогою стилів CSS. Назвемо його ідентифікатором nav. - навігація. У нього помістимо чотири наших кнопки: вгору, вліво, вправо і вниз. Кожній додамо окремий клас, відповідний, положенню кнопки і її назві: вгору - up. вліво - left. вправо - right. вниз - down.
Ось ми і підійшли до найголовнішого, а це мабуть JQuery код, який ми зараз детально розглянемо. Створюємо ми документ, в якому прописуємо звичайне звернення за допомогою функції. Я не буду розбирати кожен елемент, а мабуть зупинимося тільки на першому.
Прописуємо класу left функцію кліка, після якого ми можемо з блоком ідентифікатора block виконувати будь-яку анімацію, так як ми саме вказали, що з цим блоком буде виконувати функцію animate - анімацію, а в даному випадку ми просто будемо під час кожного кліка, рухати блок вліво на 10 пікселів. В принципі, ми можемо і додати інші властивості, наприклад при кліці зменшувати прозорість, або щоб блок поводився якось не стандартно, наприклад, смикався. Ну це вже такі тонкощі, які по суті потрібно вирішувати саме Вам!
Переходимо до стилів, і тут хочу відзначити, що по суті їх я прописував тільки для додання якийсь впорядкованої стилізації, а по суті вони не є обов'язковими.
Буду радий, кому допоміг даний матеріал, до наступних матеріалів! Радий всім хто читає!