Lösung des Problems des IMG-Tags unter IE10

Ich habe zuvor eine einfache Demo geschrieben, aber später festgestellt, dass sie mit IE10 oder niedriger nicht verwendet werden konnte. Beginnen wir mit einem 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; Höhe: 1px; Rand: ausgeblendet;}span{ Breite: 200px; oben: 0; Cursor: Zeiger;}#down{ oben: auto; unten: 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'; timer = setInterval(function(){ num += 4; if(num > 0){ num = 0; clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){ clearInterval(timer);}

Der erzielte Effekt besteht darin, dass sich das Bild nach oben bewegt, wenn sich die Maus in den oberen Bereich bewegt. Wenn sich die Maus in den unteren Bereich bewegt, bewegt sich das Bild nach unten und stoppt, wenn es den Bereich verlässt.

In Versionen unter IE10 gibt es jedoch keine Auswirkung, wenn die Maus über den Bereich bewegt wird.

Nach dem Testen habe ich festgestellt, dass das Bewegen der Maus darüber einen Effekt hat, wenn ich dem Bereich eine Hintergrundfarbe hinzufüge.

Code hinzufügen:

 Hintergrund: #fff; Deckkraft: 0; filter:alpha(opazität=0);

Fügen Sie eine Hintergrundfarbe hinzu und stellen Sie sie auf transparent ein. Da es Kompatibilitätsprobleme gibt, füge ich einen Filter hinzu und der Endeffekt ist genau derselbe wie zuvor.

Später fragte ich einen Freund und er sagte, dass das IMG-Tag unter IE10 verschachtelt wird, also habe ich das IMG-Tag außerhalb des Div platziert.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Referenzwert für jedermanns Studium oder Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht für die Kommunikation hinterlassen Netzwerk.