Resolvendo o problema da tag img abaixo do IE10

Eu escrevi uma demonstração simples antes, mas depois descobri que ela não poderia ser usada no IE10 ou inferior. Vamos começar com um trecho de código.

 <div class=all id=box> <img id=image src=psb.png width=512 height=1470 > <span id=up></span> <span id=down></span></div>

 .all{ posição: relativa; largura: 512px; borda: 1px sólida #000; superior: 0; cursor: ponteiro;}#para baixo{ superior: inferior: 0;

 var ops = document.getElementById('image'), oup = document.getElementById('up'), odown = document.getElementById('down'), obox = document.getElementById('box'), timer = num; = 0;oup.onmouseover = function(){ clearInterval(timer); 4; if(num < -1070){ num = -1070; clearInterval(timer); temporizador = setInterval(função(){ num += 4; if(num > 0){ num = 0; clearInterval(temporizador); } ops.style.marginTop = num+'px';,30)}obox.onmouseout = function(){ clearInterval(timer);}

O efeito alcançado é que quando o mouse se move para a extensão superior, a imagem se move para cima, quando o mouse se move para a extensão inferior, a imagem se move para baixo e para quando sai.

No entanto, nas versões anteriores ao IE10, não há efeito quando o mouse é movido sobre o intervalo.

Após o teste, descobri que se eu adicionar uma cor de fundo ao intervalo, mover o mouse terá um efeito.

Adicione o código:

 fundo: #fff; opacidade: 0; filtro:alfa(opacidade=0);

Adicione uma cor de fundo e defina-a como transparente. Como a opacidade apresenta problemas de compatibilidade, adiciono um filtro e o efeito final é exatamente o mesmo de antes.

Mais tarde, perguntei a um amigo e ele disse que a tag img seria aninhada no IE10, então coloquei a tag img fora do div.

 <img id=image src=psb.png width=512 height=1470 ><div class=all id=box> <span id=up></span> <span id=down></span></div>

O texto acima é todo o conteúdo deste artigo. Espero que o conteúdo deste artigo tenha certo valor de referência para o estudo ou trabalho de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para comunicação. Rede.