Всем друзьям, которые использовали QQ для общения в чате, нравится функция автоматического скрытия окон, благодаря которой окно выглядит свежим, чистым и динамичным. Некоторые из моих друзей хотят добавить подобные вещи на свои веб-страницы, и после совместного исследования они обнаружили это. Эффекта можно достичь с помощью Dreamweaer. Давайте посмотрим на создание активной строки меню.
Шаг 1. Создайте внешний вид меню.
Создайте новый файл в Dreamweaer, нарисуйте слой, вставьте в него таблицу (как показано на рисунке 1), измените таблицу, затем добавьте пункты меню и создайте гиперссылки на каждый элемент. подчеркивание гиперссылки, вы можете изменить стиль CSS гиперссылки. На панели стилей CSS установите для параметра «Оформление» как «Ссылка», так и «Наведение» значение «Нет» с помощью селектора CSS «Наведение». Цвет» устанавливается на красный, и, наконец, заданный стиль применяется к каждой строке меню (вы можете нажать клавишу «F12», чтобы просмотреть эффект).
Рисунок 1
Шаг 2. Создайте динамический эффект меню.
1. Выберите слой, нажмите и удерживайте левую кнопку, когда мышь примет форму креста, и перетащите слой в правый верхний угол страницы (так, чтобы вся строка меню была полностью открыта, но верхний край только близко к верхнему краю страницы) и откройте время в меню панели «Линия», выберите слой и перетащите его на временную шкалу. Dreamweaer автоматически сгенерирует анимационный объект длиной 15 кадров. объект анимации до 30-го кадра и установите его длину в 30 кадров. Затем щелкните правой кнопкой мыши на кадре 15, выберите опцию «Добавить ключевой кадр» во всплывающем контекстном меню, чтобы вставить ключевой кадр, и перетащите слой в подходящее положение (рис. 2).
Рисунок 2. Снова щелкните правой кнопкой мыши на кадре 15 в окне временной шкалы, выберите «Добавить действие» во всплывающем контекстном меню, добавьте в кадр интерактивное поведение, и Dreamweaer автоматически откроет панель поведения. Нажмите кнопку «+» на панели поведения, выберите «Временная шкала/Остановить временную шкалу» во всплывающем меню, откройте диалоговое окно «Остановить временную шкалу», выберите «Временная шкала1» и нажмите кнопку «ОК», чтобы закрыть диалоговое окно. . Событием интерактивного поведения является «onFrame15», а действием — «Остановить временную шкалу», поэтому, когда временная шкала достигает 15-го кадра, анимация прекращает воспроизведение, тем самым реализуя функцию отскока строки меню.
2. Используйте тот же метод, чтобы добавить интерактивное поведение «Остановить временную шкалу» на 30-м кадре временной шкалы, реализовав тем самым функцию всплывающего меню. После добавления этих двух интерактивных вариантов поведения в соответствующем кадре окна временной шкалы появляется синий квадрат, обозначающий интерактивное поведение. Установите флажок «Автовоспроизведение и цикл», чтобы включить автоматическое зацикливание анимации (рис. 3).
Рисунок 3
3. Теперь вам нужно настроить поведение, позволяющее продолжать воспроизведение временной шкалы после ее остановки. Моя идея такова: в обычном состоянии строка меню всплывает, но сохраняет только слова «Campus Grand View» ниже, а всплывающее окно и отскок строки меню контролируются тем, проходит ли мышь над «Campus Grand View». Просмотр» в строке меню. . Продолжить можно так: выберите в строке меню слово «Campus Grand View» (убедитесь, что адрес гиперссылки этого слова — «#», то есть пустая ссылка), нажмите кнопку «+» на панели поведения. , и во всплывающем окне выберите «Временная шкала/Воспроизвести временную шкалу» в меню, выберите «Временная шкала1» в всплывающем диалоговом окне и нажмите кнопку «ОК». В этот момент поведение будет добавлено на панель поведения и нажмите кнопку «ОК». выберите событие «onMouseOver» в раскрывающемся списке «События», указывая, что анимация будет воспроизводиться, когда указатель мыши находится над словом (рис. 4).
Рисунок 4. На этом этапе активная строка меню завершена. Вы можете нажать клавишу «F12», чтобы просмотреть его эффект.
Но у этой строки меню есть один недостаток: она должна исчезать, когда указатель мыши проходит через определенную область под строкой меню (в данном случае надпись «Campus Grand View»). Если вы хотите, чтобы строка меню появлялась, просто щелкните ее. Отведите указатель мыши от строки меню, чтобы меню исчезло. Возможно, вам придется использовать Fireworks или Flash. Если у вас есть хорошие методы, напишите нам, чтобы обсудить это.
