Embora existam muitos plug-ins disponíveis, a fim de melhorar juntos, fiz uma série de exemplos de séries práticas JavaScript e compartilhei com você. Se você tiver boas sugestões, certifique -se de apontá -las para não enganar seus filhos!
Hoje é a primeira batalha: um menu com um efeito de animação de coleção e liberação, o efeito é o seguinte: (O estilo é um pouco feio (-^-))
(Desde que usei editores diferentes quando estava escrevendo este artigo, o efeito da demonstração não pode ser adicionado por enquanto. Aqui estão: o código e demonstração completos finais)
Efeito de animação: o mouse Passear altera o plano de fundo e a cor da fonte de todos os alvos, mova o mouse para 'navegação na página inicial', exiba o menu de agrupamento abaixo. O menu de agrupamento tem um submenu. Clique no Zoom, o que levará a efeitos excessivos de animação! Além disso, você pode adicionar e excluir menus de navegação e submenu à vontade sem afetar o efeito!
Como alcançá -lo?
Etapa 1: O que usar para implementar o menu? O código HTML foi projetado da seguinte maneira, seguindo o princípio da separação do código JS e do código HTML! Você não pode ver um código JS aqui
Era assim que o estilo era aplicado: era muito velho! ! !
Etapa 2: estilo CSS. O mouse Passe o mouse altera o plano de fundo e a cor da fonte de todos os alvos e usa diretamente a transição do CSS e o mouse. No entanto, não listaremos todos os outros layouts do estilo CSS. Vamos fazer você mesmo. Preste atenção aos seguintes pontos:
#ul {.... Z-Index: 100; } #ul Li {display: Inline-Block; Posição: relativa; topo: 0; Esquerda: -25px; largura: 10%; largura de min: 70px; Altura: 30px; Alinhamento de texto: centro; altura de linha: 30px; borda: 1px cinza sólido; Radio de fronteira: 10px; Background-Color: AliceBlue; Cursor: Ponteiro; -Webkit-transição: todos os 0,3s de facilidade; -Moz-transição: todos os 0,3s de facilidade; -ms-transição: todos os 0,3s facilitados; -O-transição: todos os 0,3s facilitados; Transição: todos os 0,3s de facilidade; } #ul li: hover {Background-Color: Aquamarine; cor: Red;} ....Show-hide: Hover {Background-Color: bege} .a-div {Background-Color: Aqu-Marine; Radio de fronteira: 10px; Cor: preto; Exibir: Nenhum; opacidade: 0} .a {z -index: -1; exibição: bloco; ...}Etapa 3: Esta etapa é o ponto -chave. Se você adicionar o evento ouvindo cada opção de menu e agrupamento, acho que é muito importante que a quantidade de código deve ser maior ou menos. Existe alguma maneira de adicionar monitoramento a um elemento para alcançá -lo?
Deve haver uma resposta, usando o mecanismo de bolhas de eventos! Adicione o evento ouvindo a tag UL elemento pai e altere diretamente o estilo de elemento do evento de gatilho na função de escuta, é simples!
O código é o seguinte:
var ul = document.getElementById ('ul'); ul.addeventListener ('mouseOver', ouvinte1, false); ul.addeventListener ('mouseout', ouvinte2, false); ul.addeventListener ('clique', ouvinte3, false);Como o IE8 e as versões abaixo não possuem um addEventListener, se você deseja ser compatível, você deve adicionar o código correspondente do AnextEvent.
Etapa 4 : o protagonista aparece! Implementar funções do ouvinte1, ouvinte2, ouvinte3.
Primeiro, vamos tirar a função mais simples do ouvinte1, o código é o seguinte:
function ouvinte1 (event) {// evento = evento || window.event; // Compatível com o IE8 e versões anteriores var Target = Event.Target || Event.srceMplement; // compatível com o IE8 e versões anteriores se (Target.tagname.tolowerCase () === 'li') {var div1 = Target.getElementsByTagName ('div') [0]; div1.style.display = 'bloco'; var i = 0; var id; (function foo () {if (i> = 1) {cleartimeout (id); id = null; return;} i+= 0.2; div1.style.Opacity = i; id = setTimeout (function () {cleartimeout (id); foo ()}, 30);); }}Novamente, tudo é para o IE8 e versões mais antigas.
1. Porque seu evento não possui um atributo de destino, apenas o atributo correspondente do SRCELENT
2. E este evento de frase = evento || window.event; pode realmente ser omitido aqui. Somente ao usar atributos para definir a escuta de eventos de registro, como ul.onmouseover = function () {} ou <ul onMouseover = 'func'>, ie8 e versões mais antigas podem obter apenas o objeto de evento atual através da janela.Event
OK, agora que você obteve o alvo do evento de gatilho atual, as coisas são muito mais simples, através das quais você pode mudar a si mesmo e a seus parentes!
A seguir, a função do ouvinte2, que é acionada quando o MouseOut, manipula principalmente o elemento filho alvo DIV, o código é o seguinte:
função ouvinte2 (event) {// evento = evento || window.event; var no destino = event.target || event.srcelement; if (Target.TagName.TolowerCase () === 'Li') {var div1 = Target.getElementsByTagName ('div') [0]; div1.onMouseOver = function () {div1.style.display = 'bloqueio'; div1.style.Opacity = 1; }; div1.onMouseOut = function () {div1.style.display = 'nenhum'; div1.style.Opacity = 0; }; div1.style.display = 'nenhum'; // Este grupo deve ocultar div1 quando o mouse sai de cima div1.style.Opacity = 0; }}Ok, até agora, a maioria dos efeitos já foi alcançada, e há a última etapa, ou seja, a função protagonista nº 1: ouvinte3, que é principalmente responsável pelo efeito de escala quando o mouse é clicado!
Princípio de implementação:
1. Defina uma variável BOOL fora da função como um interruptor, clique no mouse e clique em Off novamente;
2. Use o setTimeout para obter efeitos de animação, altere dinamicamente os atributos de altura e opacidade do submenu e o atributo de exibição;
O código completo é o seguinte:
var bool = true; função ouvinte3 (evento) {var event = event || Window.Event; var no destino = event.Target || Event.srcelement; if (Target.className === 'show-hide') {var parent = Target.parenteLement; var adiv = parent.getElementsByClassName ('a-div') [0]; if (window.getComputedStyle (adiv, nulo) .Opacidade> 0.5) {bool = false} else {bool = true} var altura = 90, alteração, opacidade, id; if (bool) {changeh = 0; opacidade = 0; Target.innerhtml = 'Financial-'; (function show () {if (alteração> altura) {cleartimeout (id); return} alteraçãoh += 5; opacidade += 0,06; //console.log(opacity:'+adiv.style.Opacacity+'.Height: ' +adiv.style.Height); adiv.style.display = 'bloco'; bool = false; } else {changeh = altura; opacidade = 1; Target.innerhtml = 'Financial+'; (function hidden () {if (alteraçãoh <0) {cleartimeout (id); adiv.style.display = 'nenhum'; return} alteraçãoh -= 10; opacidade -= 0.11; //consol. adiv.style.Opacity = Opacity; bool = true; }}}Alguns pontos a serem observados:
1. Lembre -se de limpar o ID do setTimeout e da saída; caso contrário, o loop morto é como se (alterei <0) {cleartimeout (id); adiv.style.display = 'nenhum'; return}
2. O tempo de atraso do setTimeout é definido como 16,7 porque atende à taxa de atualização da tela 60fps, o que torna confortável parecer
3. Durante o processo de depuração, ao definir os valores de incremento e decréscimo de mudança e opacidade, lembre -se de imprimi -lo para facilitar a depuração:
console.log ('opacidade:'+adiv.style.opacity+', altura:'+adiv.style.height);
4. Finalmente, a coisa mais importante na implementação de todo o menu é a seguinte frase. Sem essa frase, você não pode implementar perfeitamente todas as funções. Por exemplo: quando você clica em um grupo de submenu e depois se muda para outros grupos, a situação será muito diferente; A razão pela qual o Window.GetComputedStyle usa isso é que, quando você abre pela primeira vez, clicar em qualquer grupo não responde, porque o valor da opacidade não pode ser obtido ao clicar diretamente na primeira vez em Event.Target.
if (window.getComputedStyle (adiv, null) .Opacity> 0.5) {bool = false} else {bool = true};
No entanto, o método getComputedStyle não é suportado abaixo do IE9, e o objeto de elemento do IE possui a propriedade CurrentStyle;
Se você não está muito familiarizado com o processamento CSS, dê uma olhada no meu resumo: resumo de como ler e escrever estilos CSS usando JS nativo
Se você quiser saber mais sobre a aplicação do método setTimeout (), dê uma olhada nisso: você realmente sabe como o setTimeout funciona
Para o mecanismo de manuseio de eventos, você pode dar uma olhada nisso: Visão geral do manuseio de eventos em DOM e uma análise abrangente dos princípios do tratamento de eventos em DOM
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.