Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

jQuery Интересный эффект кругового движения с применением JQuery

Информация о теме

О теме Здравствуйте, вы читаете тему Интересный эффект кругового движения с применением JQuery созданную в в разделе JavaScript пользователем Альваро. Эта тема была просмотрена 1 104 раз(а), получила 0 комментариев и 0 очки реакции...
Название категории JavaScript
Название темы Интересный эффект кругового движения с применением JQuery
Автор темы Альваро
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение Альваро

Альваро

Пользователь
Регистрация
26.10.2015
Сообщения
76
Реакции
34
Баллы
25
Лучшие ответы
0
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!

Наводите на About me Portfolio Contact



HTML

Код HTML состоит из основного блока, содержащего изображения для области содержимого и элемент для большого круга с содержимым. Основное меню находится внутри большого круга с содержимым. После этого мы определяем структуру для трех маленьких кругов, которые появятся при наведении указателя мыши на элементы меню:

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
В двух из трех маленьких кругов у нас будут списки ссылок. В последнем круге будут изображения.



CSS

Мы абсолютно спозиционируем большую часть элементов, так как так будет намного легче применить модуль jQuery.path. Давайте начнем со стилей первых элементов:

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Мы используем все изображения в одном файле для основного меню:

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Круг должен быть расположен правильно, чтобы можно было использовать модуль jQuery.path. Так что нам нужно подтянуть его на нужное место, используя отрицательный внешний отступ? размером в половину ширины или высоты, соответственно.

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Описания внутри маленьких кругов будут иметь такой стиль:

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Тень текста и тень блока — свойства CSS3, которые не будут правильно работать в старых версиях браузера Internet Explorer.



JAVASCRIPT

Чтобы использовать модуль jQuery.path, нам нужно определить центр и радиус воображаемого круга, который будет использоваться для поворота маленького круга. В нашем случая воображаемый круг — это большой круг, изображение класса circleBig. Следующая формула даст нам центр координат:
центр x = Положение circleBig по горизонтали + радиус circleBig
центр y = Положение circleBig по вертикали + радиус circleBig
радиус r = Ширина circleBig / 2

Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!

И это все! Наслаждайтесь!
 
Верх Низ