Todos estão familiarizados com os efeitos gerais de navegação, como usar CSS para configurar, sublinhar, cor de fundo ou deslocamento do texto de navegação. No post anterior, alguns internautas mencionaram o site http://www.tonta.com.cn/ , e descobri que o efeito de navegação em sua página inicial é bom. Embora o flash não tenha um efeito muito deslumbrante, é relativamente bom. delicado e parece muito confortável.
Não tenho nada para fazer e tento conseguir o mesmo efeito de navegação no dw. O efeito é o seguinte: http://vip.5d.cn/flood/daohang/1.htm .
Primeiro, analise a composição do efeito. Quando o mouse passa, o fundo muda e a pequena imagem gira. OK! Considere usar imagem de troca (imagem invertida) + mudança de imagem de fundo (definição CSS) em dw, que deve ser capaz de obter o efeito.
Prepare 4 imagens GIF:
A imagem de fundo quando o mouse passa (no FW, o Nimate pode facilmente obter o efeito gradiente. A transparência desta imagem muda gradualmente de 0% a 100%)
[img]/conimages/web/2003-06/bg0604.gif[/img]
A imagem de fundo quando o mouse é desenhado (a transparência desta imagem muda gradualmente de 100% a 0%)
[img]/conimages/web/2003-06/b0604.gif[/img]
imagem pequena dinâmica
[img]/conimages/web/2003-06/20604.gif[/img]
Imagem estática pequena (defina o formato da imagem para gif no fw e salve-a)
[img]/conimages/web/2003-06/2a0604.gif[/img]
1. O efeito de fundo é implementado usando CSS para definir duas classes:
.style1 { background-image: url(bg.gif)}
.style2 {background-image: url(b.gif)}
é usado para a imagem de fundo quando o mouse passa e quando o mouse é puxado para fora. Em seguida, adicione o seguinte código na célula:
onmouseover="this.className='. estilo1'"
onmouseout="this.className='style2'"
pode obter o efeito do gradiente de fundo aparecendo quando o mouse passa e desaparecendo depois que o mouse é afastado.
2. O efeito de imagem invertida permite inserir uma pequena imagem estática em uma célula, usar um comportamento para adicionar um efeito de imagem de troca e configurá-la para virar uma pequena imagem dinâmica depois que o mouse passar sobre ela.
Para obter um efeito mais próximo, você precisa aplicar o efeito de imagem invertida à célula e cortar o seguinte código no código de imagem pequena estática:
onMouseOver="MM_swapImage('Image2','','2.GIF', 1)"
onMouseOut="MM_swapImgRestore()"
é colado na tag td do código da célula.
Você pode inverter a imagem quando o mouse passa sobre a célula, produzindo um efeito dinâmico.
Neste ponto todos os efeitos podem ser alcançados.
Neste exemplo, o efeito obtido com dw é quase comparável ao efeito produzido pelo flash, ou ainda melhor (conseguimos o efeito do gradiente de fundo desaparecendo quando o mouse desenha a célula).
Seção:
1. Criar cuidadosamente imagens de fundo gradiente em fw (acabei de fazer duas imagens gradientes aleatórias) + modificar as células de navegação pode tornar o efeito mais delicado e marcante;
2. Ao usar este método para criar efeitos de navegação, você precisa usar várias células. Observe que o efeito de troca não pode ser copiado. Após copiar o código, você precisa modificar dois códigos:
onMouseOver="MM_swapImage('Image3','','. 2.GIF',1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
Basta modificar o nome da imagem invertida para um valor diferente.
3. O conteúdo técnico deste exemplo não é muito alto; e não estou muito familiarizado com flash, então não sei qual é mais fácil de usar, dw ou flash, mas apenas menciono aqui para lhe dar uma maneira de fazer isso. resolver o problema.
4. A sobreposição de dois efeitos simples pode criar um efeito mais legal. Espero que seja esclarecedor para todos. Mais um ponto: ao fazer imagens de fundo animadas, para conseguir o efeito, é necessário definir o loop da animação gif para não. loop (não loop)
:)