Résoudre le problème de la balise img sous IE10

J'ai déjà écrit une démo simple, mais j'ai découvert plus tard qu'elle ne pouvait pas être utilisée avec IE10 ou une version antérieure. Commençons par un morceau de code.

 <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{ position : relative ; largeur : 512 px ; hauteur : 400 px ; bordure : 1px solid #000 ; marge : 100px débordement : caché ;}span{ largeur : 512 px ; hauteur : 200 px ; haut : 0 ; curseur : pointeur ;}#bas{ haut : auto bas : 0 ;

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

L'effet obtenu est que lorsque la souris se déplace vers la travée supérieure, l'image se déplace vers le haut, lorsque la souris se déplace vers la travée inférieure, l'image se déplace vers le bas et s'arrête lorsqu'elle quitte.

Cependant, dans les versions inférieures à IE10, il n'y a aucun effet lorsque la souris est déplacée sur l'étendue.

Après les tests, j'ai découvert que si j'ajoutais une couleur d'arrière-plan à l'étendue, le passage de la souris aurait un effet.

Ajouter du code :

 arrière-plan : #fff ; opacité : 0 ; filtre : alpha (opacité = 0) ;

Ajoutez une couleur d'arrière-plan et définissez-la sur transparent. Comme l'opacité présente des problèmes de compatibilité, j'ajoute un filtre et l'effet final est exactement le même qu'avant.

Plus tard, j'ai demandé à un ami et il m'a dit que la balise img serait imbriquée sous IE10, j'ai donc mis la balise img en dehors du 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>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article aura une certaine valeur de référence pour les études ou le travail de chacun. Si vous avez des questions, vous pouvez laisser un message de communication. Merci pour votre soutien à VeVb Wulin. Réseau.