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