Resolviendo el problema de la etiqueta img debajo de IE10

Escribí una demostración simple antes, pero luego descubrí que no se podía usar con IE10 o inferior. Comencemos con un fragmento de código.

 <div class=all id=box> <img id=image src=psb.png ancho=512 alto=1470 > <span id=arriba></span> <span id=abajo></span></div>

 .all{ posición: relativa; ancho: 512px; altura: 400px; borde: 1px sólido #000; posición: absoluta; arriba: 0; cursor: puntero;}#abajo{ arriba: auto abajo: 0;

 var ops = document.getElementById('imagen'), oup = document.getElementById('arriba'), odown = document.getElementById('abajo'), obox = document.getElementById('cuadro'), timer = null; = 0;oup.onmouseover = función(){ clearInterval(temporizador); temporizador = setInterval(función(){ num -= 4; if(num < -1070){ num = -1070; clearInterval(temporizador); } ops.style.marginTop = num+'px'; temporizador = setInterval(función(){ núm += 4; if(núm > 0){ núm = 0; clearInterval(temporizador); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){ clearInterval(temporizador);}

El efecto logrado es que cuando el mouse se mueve al tramo superior, la imagen se mueve hacia arriba, cuando el mouse se mueve al tramo inferior, la imagen se mueve hacia abajo y se detiene cuando sale.

Sin embargo, en versiones inferiores a IE10, no hay ningún efecto cuando se mueve el mouse sobre el intervalo.

Después de las pruebas, descubrí que si agrego un color de fondo al intervalo, mover el mouse tendrá efecto.

Agregar código:

 fondo: #fff; opacidad: 0; filtro: alfa (opacidad = 0);

Agregue un color de fondo y configúrelo como transparente Debido a que la opacidad tiene problemas de compatibilidad, agrego un filtro y el efecto final es exactamente el mismo que antes.

Más tarde, le pregunté a un amigo y me dijo que la etiqueta img se anidará en IE10, así que puse la etiqueta img fuera del div.

 <img id=image src=psb.png ancho=512 alto=1470 ><div clase=todos id=box> <span id=arriba></span> <span id=abajo></span></div>

Lo anterior es el contenido completo de este artículo. Espero que el contenido de este artículo tenga cierto valor de referencia para el estudio o trabajo de todos. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Red.