Все знакомы с общими эффектами навигации, такими как использование CSS для настройки, подчеркивания, цвета фона или смещения текста навигации. В предыдущем посте некоторые пользователи сети упомянули веб-сайт http://www.tonta.com.cn/ , и я обнаружил, что эффект навигации на его домашней странице хороший. Хотя вспышка не имеет очень ослепляющего эффекта, это относительно. нежный и выглядит очень удобно.
Мне делать нечего и пытаюсь добиться такого же эффекта навигации в dw. Эффект следующий: http://vip.5d.cn/flood/daohang/1.htm .
Сначала проанализируйте состав эффекта. При наведении курсора мыши фон меняется, а маленькое изображение вращается. Хорошо! Рассмотрите возможность использования изображения подкачки (перевернутое изображение) + изменение фонового изображения (определение CSS) в dw, что должно обеспечить достижение эффекта.
Подготовьте 4 gif-изображения:
Фоновое изображение при наведении курсора мыши (в FW Nimate легко добиться эффекта градиента. Прозрачность этого изображения постепенно меняется от 0% до 100%)
[img]/conimages/web/2003-06/bg0604.gif[/img]
Фоновое изображение при вытягивании мыши (прозрачность этого изображения постепенно меняется от 100% до 0%)
[img]/conimages/web/2003-06/b0604.gif[/img]
маленькое динамичное изображение
[img]/conimages/web/2003-06/20604.gif[/img]
Небольшое неподвижное изображение (установите формат изображения в формате gif и сохраните его)
[img]/conimages/web/2003-06/2a0604.gif[/img]
1. Фоновый эффект реализован с помощью CSS для определения двух классов:
.style1 {background-image: url(bg.gif)}
.style2 {background-image: url(b.gif)}
используется в качестве фонового изображения при наведении и вытягивании мыши. Затем добавьте в ячейку следующий код:
onmouseover="this.className='. стиль1'"
onmouseout="this.className='style2'"
может добиться эффекта градиента фона, появляющегося, когда мышь проходит мимо, и исчезающего после того, как мышь удаляется.
2. Эффект переворота изображения позволяет вставить небольшое статическое изображение в ячейку, использовать поведение для добавления эффекта замены изображения и настроить его на переворот в маленькое динамическое изображение после наведения на него указателя мыши.
Чтобы добиться более близкого эффекта, вам нужно применить эффект перевернутого изображения к ячейке и вырезать следующий код в коде статического маленького изображения:
onMouseOver="MM_swapImage('Image2','','2.GIF', 1)"
onMouseOut="MM_swapImgRestore()"
вставляется в тег td кода ячейки.
Вы можете добиться переворачивания изображения при наведении курсора мыши на ячейку, создавая динамический эффект.
На этом этапе можно достичь всех эффектов.
В этом примере эффект, достигнутый с помощью dw, практически сравним с эффектом от вспышки, а то и лучше (мы добились эффекта исчезновения градиента фона при вытягивании ячейки мышью).
Раздел:
1. Тщательное создание градиентных фоновых изображений в fw (я только что сделал два случайных градиентных изображения) + изменение ячеек навигации может сделать эффект более деликатным и выдающимся;
2. При использовании этого метода для создания эффектов навигации необходимо использовать несколько ячеек. Обратите внимание, что эффект замены нельзя скопировать. После копирования кода необходимо изменить два кода:
onMouseOver="MM_swapImage('Image3','',' 2.ГИФ',1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
Просто измените имя перевернутого изображения на другое значение.
3． Техническое содержание этого примера не очень велико; и я не очень хорошо знаком с flash, поэтому не знаю, какой из них проще использовать, dw или flash, но я упоминаю об этом здесь только для того, чтобы дать вам возможность решить проблему.
4. Наложение двух простых эффектов может создать более крутой эффект. Надеюсь, это будет полезно для всех. Еще один момент: при создании анимированных фоновых изображений, чтобы добиться эффекта, вам нужно отключить зацикливание GIF-анимации. зацикливание (не зацикливание)
:)