Сегодня по просьбе друзей напишу простой урок по эффекту скольжения меню на моем сайте на кафедре программного обеспечения Нюцзянского университета, вроде бы реклама на Itnow тоже есть. используйте этот эффект. Когда он не используется. Скрытый, когда вы нажимаете на слой кнопки, он медленно выдвигается, что экономит ограниченное пространство на странице и дает завидный визуальный эффект, который выглядит довольно приятно. Вы можете нажать здесь, чтобы просмотреть этот эффект.
Давайте перейдем к делу и перестанем нести чушь. Подготовка следующая:
1. Создайте новый пустой документ в dw (или откройте страницу, на которую вы хотите добавить эффекты).
2. Установите свой собственный стиль CSS.
3. Вставьте на страницу длинную таблицу размером 500 пикселей (обратите внимание: цель вставки таблицы — сохранить неизменным относительное положение слоя управления при разных разрешениях. Если на вашей странице ранее не были выполнены соответствующие настройки, возможно, вам придется это сделать. Потратьте некоторое время на организацию структуры страницы).
4. Поместите курсор в таблицу, щелкните меню [Вставка - Слой], чтобы вставить слой длиной 500 и высотой 20, и назовите его Layer1.
5. Затем поместите курсор в слой Layer1, нажмите меню [Вставка - Слой] и вставьте слой Layer2 длиной 500 и высотой 130, установите левое поле и верхнее поле в свойствах Layer2 на 0 и укажите; Это цвет фона, который вам нравится.
6. Затем повторите метод шага 5 и вставьте слой Layer3. В моем уроке я просто хочу разместить несколько кнопок. В итоге у меня получилось вот так:
СОВЕТ: Целью этого является добавление перегородки перед слоем, который вы хотите сдвинуть. Только когда вы щелкнете по нему, слой будет медленно выдвигаться из-под вашего слоя.
Теперь мы официально вступаем в процесс производства скользящего меню, которое собираемся создать сегодня.
Теперь давайте снова повторим шаг 5, описанный выше, вставим еще один слой Layer4, установим для свойств слоя ширину 500 и высоту 150, что является точной суммой высот Layer2 и Layer3, и настроим слой Layer4 на два других слоя ниже. . Как показано на рисунке:
Затем мы щелкаем по глазу перед слоем 2, чтобы закрыть его и увидеть слой 4 под ним.
В это время мы нажимаем ALT + F9, чтобы открыть панель временной шкалы. DW добавил для нас временную шкалу по умолчанию Timeline1. Затем мы выбираем слой, который мы хотим сдвинуть, Layer4, щелкните его правой кнопкой мыши и выберите [Добавить на временную шкалу]. ]. В это время мы видим слой Layer4, который мы только что создали, на панели временной шкалы, что показывает, что мы успешно его добавили!
Затем мы щелкаем по 15-му кадру на временной шкале и регулируем верхнее поле на панели свойств слоя 4 до 150. На этом этапе скользящий слой готов. Вы можете медленно перетаскивать красный квадрат на временной шкале от 1 до 15, и вы увидите, как ваш слой медленно выдвигается из-под слоя 2 и выходит из-под слоя 3!
Хорошо, теперь нам нужно только установить действие для этого скользящего слоя Layer4, чтобы активировать его, и все готово:) Перед этим я вставил таблицу на добавленный мной слой Layer3 и установил две для кнопки Layer4.
Сначала мы настраиваем действие для активации скользящего слоя. Выберите «Развернуть эту кнопку», перейдите на панель «Поведение» и нажмите Выберите [Временная шкала — Временная шкала воспроизведения] в появившемся меню. DW откроет всплывающую форму, выберите временную шкалу1 в раскрывающемся меню выше.
Затем подтвердите, что событие onclick на панели поведения.
Хорошо, здесь вы можете просмотреть его. Когда вы нажмете кнопку «Развернуть», ваши слои будут медленно перемещаться сверху вниз!
А как насчет этого, вы можете увидеть :) Давайте добавим к слою простое действие закрытия, то есть слой будет скрыт после нажатия кнопки закрытия. Нажмите кнопку «Закрыть», перейдите на панель «Поведение» и нажмите Выберите [Показать скрытые слои] в появившемся меню, выберите слой 4 во всплывающей форме, а затем нажмите кнопку «Скрыть» ниже, чтобы сделать его скрытым, как показано на рисунке:
Хорошо, я просмотрел его еще раз и обнаружил, что после его развертывания я щелкнул, чтобы закрыть слой, и он исчез :) Однако, похоже, возникла проблема, когда я снова нажал, чтобы развернуть, ничего не произошло. Это потому, что мы по-прежнему. есть действие, которое не было установлено.
Прямо сейчас повторите шаг 5, выберите кнопку «Развернуть», добавьте действие [Временная шкала — Перейти к кадру временной шкалы], выберите временную шкалу1 из раскрывающегося меню во всплывающей форме и добавьте 1 к номеру кадра.
Что ж, этот предварительный просмотр показал, что эта проблема решена. Но мы, похоже, все еще упустили из виду проблему. После нажатия кнопки закрытия слой становится скрытым, а затем нажатие кнопки развертывания не реагирует. Просто используйте старый метод и добавьте действие к кнопке «Развернуть», чтобы решить проблему!
Повторите шаг 5 и выберите [Показать скрытый слой]. В отличие от шага 6, на этот раз мы выбираем «Показать». После подтверждения убедитесь, что время, когда скрытый слой отображается на панели поведения, соответствует щелчку мыши. Панель поведения развернутой кнопки в этот момент выглядит так, как показано ниже:
ОК, предпросмотр еще раз, все в порядке!
На этом этапе эффект завершен. Конечно, каждый может создавать лучшие эффекты самостоятельно, но пока мы освоили использование временной шкалы и поведения действий, все эффекты — это всего лишь вопрос работы:)