Несмотря на то, что есть много плагинов, чтобы улучшить вместе, я сделал серию примеров практической серии JavaScript и поделился с вами. Если у вас есть хорошие предложения, пожалуйста, укажите их, чтобы вы не ввели в заблуждение своих детей!
Сегодня первая битва: меню с эффектом анимации коллекции и выпуска, эффект заключается в следующем: (Стиль немного уродливый (-^-))
(Поскольку я использовал разные редакторы, когда я писал эту статью, демонстрационный эффект не может быть добавлен на данный момент. Вот: окончательный полный код и демонстрация)
Эффект анимации: мышь изменяет фон и цвет шрифта всех целей, переместите мышь в «Навигацию по домашней странице», отобразите меню группировки ниже. В меню группировки есть подменю. Нажмите на увеличение, что приведет к чрезмерным эффектам анимации! Кроме того, вы можете добавить и удалить меню навигации и подменю по желанию, не влияя на эффект!
Как это достичь?
Шаг 1: Что использовать для реализации меню? Код HTML разработан следующим образом, следуя принципу разделения кода JS и HTML -кода! Вы не можете увидеть код JS здесь
Это было то, как это выглядело до того, как был применен стиль: он был очень старым! ! !
Шаг 2: Стиль CSS. Наусание мыши меняет фон и цвет шрифта всех целей, и непосредственно использует переход CSS и: Hover. Тем не менее, мы не будем перечислять все другие макеты стиля CSS. Давайте сделаем это самостоятельно. Обратите внимание на следующие моменты:
#UL {.... Z-Index: 100; } #ul li {display: inline-block; позиция: относительно; Верх: 0; Слева: -25px; Ширина: 10%; Мин-ширина: 70px; Высота: 30px; Текст-альбом: Центр; высота линии: 30px; Граница: 1px сплошной серый; граница радий: 10px; Фоно-цвета: Aliceblue; курсор: указатель; -Вобкит-трансляция: все простой 0,3 с; -Моз-трансляция: все легкость в 0,3 с; -Сс-транзирование: все легкость в 0,3 с; -О-транзиция: все легкость 0,3 с; Переход: все простой 0,3 с; } #ul li: Hover {foangy-color: quamarine; color: red;} ... .show-hide: Hover {background-color: beige} .a-div {foanle-color: quamarine; граница радий: 10px; Цвет: черный; дисплей: нет; непрозрачность: 0} .a {z -index: -1; дисплей: блок; ...}Шаг 3: Этот шаг является ключевым моментом. Если вы добавите события, прослушивая каждый вариант меню и группировку, я лично думаю, что это много проблем, и количество кода должно быть больше или меньше. Есть ли способ добавить мониторинг элемента для его достижения?
Должен быть ответ, используя пузырящий механизм событий! Добавьте событие прослушивания на тег UL родительского элемента и напрямую измените стиль элемента события триггера в функции слушания, это так просто!
Код заключается в следующем:
var ul = document.getElementbyId ('ul'); ul.addeventlistener ('mouseover', слушатель1, false); Ul.AddeventListener ('Mouseout', Slister2, false); Ul.AddeventListener ('Щелкни, слушатель3, false);Поскольку версии IE8 и ниже не имеют addeventListener, если вы хотите быть совместимым, вы должны добавить соответствующий код AttachEvent.
Шаг 4 : Главный герой появляется! Реализовать функции прослушивания1, слушатель2, слушатель3.
Во -первых, давайте возьмем самую простую функцию прослушивателя1, код заключается в следующем:
функция прослушивание1 (event) {// event = event || window.event; // Совместим с IE8 и предыдущими версиями var target = event.target || event.srcelement; // Совместим с IE8 и предыдущими версиями if (target.tagname.tolowercase () === 'li') {var div1 = target.getelementsbytagname ('div') [0]; div1.style.display = 'block'; var i = 0; var id; (function foo () {if (i> = 1) {cleartimeout (id); id = null; return;} i+= 0,2; div1.style.opacity = i; id = settimeout (function () {cleartimeout (id); foo ()}, 30);}) (); }}Опять же, все для IE8 и старых версий.
1. Поскольку его событие не имеет целевого атрибута, только соответствующий атрибут Srcelement
2. и это предложение событие = событие || window.event; На самом деле можно опустить здесь. Только при использовании атрибутов для установки прослушивания событий регистрации, таких как ul.onmouseover = function () {}, или <ul onmouseover = 'func'>, IE8 и более старые версии могут получить только текущий объект события.
Хорошо, теперь, когда вы получили цель текущего триггерного события, все намного проще, с помощью которого вы можете изменить себя и его родственников!
Ниже приведена функция слушателя2, которая запускается, когда мышь -аут, в основном манипулирует целевым девственным элементом дочернего элемента, код выглядит следующим образом:
функция прослушивание2 (event) {// event = event || window.event; var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {var div1 = target.getelementsbytagname ('div') [0]; div1.onmouseover = function () {div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'none'; div1.style.opacity = 0; }; div1.style.display = 'none'; // Эта группа должна скрыть div1, когда мышь выходит сверху div1.style.opacity = 0; }}Хорошо, к настоящему времени большинство эффектов были достигнуты, и есть последний шаг, то есть главный герой № 1: функция слушателя3, которая в основном отвечает за эффект масштабирования, когда мышь нажимается!
Принцип реализации:
1. Определите переменную BOOL вне функции в качестве переключателя, нажмите на мышь и снова нажмите на выезд;
2. Используйте SetTimeout для достижения эффектов анимации, динамически изменить атрибуты высоты и непрозрачности подменю и атрибут дисплея;
Полный код заключается в следующем:
var bool = true; Функция прослушивания3 (event) {var event = event || window.event; var target = event.target || Event.srcelement; if (target.classname === 'show-hide') {var parent = target.parentelement; var adiv = parent.getElementsbyclassname ('a-div') [0]; if (window.getComputedStyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true} var height = 90, изменениех, непрозрачность, id; if (bool) {changeh = 0; непрозрачность = 0; target.innerhtml = 'financial-'; (function show () {if (изменение> высота) {cleartimeout (id); return} woodh += 5; непрозрачность += 0,06; //console.log('Opacity:'+Adiv.Style.Opacity+', его срок: ' +adiv.style.height); adiv.style.display = 'block'; bool = false; } else {changeh = height; непрозрачность = 1; target.innerhtml = 'financial+'; (function hidden () {if (изменение <0) {cleartimeout (id); adiv.style.display = 'none'; return} изменение 'px'; bool = true; }}}Несколько моментов, чтобы отметить:
1. Не забудьте очистить идентификатор Settimeout и выхода, в противном случае мертвый цикл похож на if (изменение <0) {cleartimeout (id); adiv.style.display = 'none'; return}
2. Время задержки установленного времени установлено на 16,7, потому что оно соответствует скорости обновления экрана 60 кадров в секунду, что делает его удобным.
3. Во время процесса отладки при установлении значений увеличения и уменьшения изменений и непрозрачности не забудьте распечатать его, чтобы облегчить отладку:
console.log ('непрозрачность:'+adiv.style.opacity+', высота:'+adiv.style.height);
4. Наконец, самое важное в реализации всего меню - это следующее предложение. Без этого предложения вы не можете идеально реализовать все функции. Например: когда вы нажимаете на группу подменю, а затем переезжаете в другие группы, ситуация будет очень другой; Причина, по которой window.getComputedStyle использует это, заключается в том, что когда вы открываете первый раз, нажатие на любую группу не отвечает, потому что значение непрозрачности не может быть получено при первом нажатии через Event.Target напрямую.
if (window.getComputedStyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true};
Тем не менее, метод GetComputedStyle не поддерживается ниже IE9, а объект IE Element имеет свойство CurrentStyle;
Если вы не очень хорошо знакомы с обработкой CSS, посмотрите на мое резюме: краткое изложение того, как читать и писать стили CSS, используя Native JS
Если вы хотите узнать больше о применении метода SetTimeout (), посмотрите на это: действительно ли вы знаете, как работает SetTimeout
Для механизма обработки событий вы можете взглянуть на это: обзор обработки событий в DOM и всесторонний анализ принципов обработки событий в DOM
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.