Lösung für das img-Tag-Problem unter IE10

Lösung für das img-Tag-Problem unter IE10

Finden Sie das Problem

Ich habe vorher eine einfache Demo geschrieben, aber später festgestellt, dass sie unter IE10 nicht funktionierte. Hier ist ein Stück Code

HTML:

<div Klasse="alle" id="box">
    <img id="Bild" src="psb.png" Breite="512" Höhe="1470" >
    <span id="nach oben"></span>
    <span id="nach unten"></span>
</div>

CSS:

.alle{ 
    Position: relativ;
    Breite: 512px; 
    Höhe: 400px; 
    Rand: 1px durchgezogen #000; 
    Rand: 100px automatisch; 
    Überlauf: versteckt;
}
Spanne{
    Breite: 512px; 
    Höhe: 200px; 
    Position: absolut; 
    links: 0; 
    oben: 0; 
    Cursor: Zeiger;
}
#runter{ 
    oben: automatisch; 
    unten: 0; 
}

JS:

var ops = document.getElementById('Bild'),
    oup = document.getElementById('up'),
    odown = document.getElementById('down'),
    obox = document.getElementById('box'),
    Zeitgeber = null;
    Zahl = 0;

oup.onmouseover = Funktion(){             
    Intervall löschen(Timer);
    Timer = Intervall festlegen(Funktion(){
        Zahl -= 4;
        wenn(Zahl < -1070){
            Zahl = -1070;
            Intervall löschen(Timer);
        }
        ops.style.marginTop = num+'px';
    },30)
}

odown.onmouseover = Funktion(){   
    Intervall löschen(Timer);
    Timer = Intervall festlegen(Funktion(){
        Zahl += 4;
        wenn(Zahl > 0){
            Zahl = 0;
            Intervall löschen(Timer);
        }
        ops.style.marginTop = num+'px';
    },30)
}

obox.onmouseout = Funktion(){ 
    Intervall löschen(Timer);
}

Der erzielte Effekt besteht darin, dass sich das Bild nach oben bewegt, wenn die Maus in den oberen Bereich bewegt wird, sich nach unten bewegt, wenn sie in den unteren Bereich bewegt wird, und anhält, wenn sie den Bereich verlässt.

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

Nach mehreren Tests habe ich zwei Lösungen gefunden.

Methode 1:

Nach dem Testen habe ich festgestellt, dass es funktioniert, wenn ich dem Bereich eine Hintergrundfarbe hinzufüge und mit der Maus darüberfahre.

Code hinzufügen:

 Hintergrund: #fff;
 Deckkraft: 0;
 Filter: Alpha (Deckkraft = 0);

Fügen Sie eine Hintergrundfarbe hinzu und stellen Sie sie auf transparent. Da es bei der Deckkraft zu Kompatibilitätsproblemen kommt, fügen Sie einen Filter hinzu. Der endgültige Effekt ist genau der gleiche wie zuvor.

Methode 2:

Später fragte ich einen Freund, der sagte, dass das img-Tag in IE10 verschachtelt werde, also müsse das img-Tag außerhalb des div platziert werden.

<img id="Bild" src="psb.png" Breite="512" Höhe="1470" >
<div Klasse="alle" id="box">       
    <span id="nach oben"></span>
    <span id="nach unten"></span>
</div>

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

<<:  Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)

>>:  Docker-Fallanalyse: Erstellen eines Redis-Dienstes

Artikel empfehlen

Kreatives „Über uns“-Webseitendesign

Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...

Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)

Inhaltsverzeichnis Wir haben in einem früheren Ar...

Löschen von zwei Bildern mit derselben ID im Docker

Als ich heute einen Docker-Container erstellt hab...

Ursachen und Lösungen für domänenübergreifende Probleme bei Ajax-Anfragen

Inhaltsverzeichnis 1. Wie entsteht Cross-Domain? ...

Anwendung von Hadoop-Zählern und Datenbereinigung

Datenbereinigung (ETL) Vor dem Ausführen des MapR...

Beispiel für die Konfiguration der Timeout-Einstellung für MySQL-Datenbanken

Inhaltsverzeichnis Vorwort 1. JDBC-Timeout-Einste...

Leitfaden zum Schreiben von HTML-Code

Gängige Konventions-Tags Selbstschließende Tags, ...

Lernen Sie, wie Sie in 6 Sekunden 1 Million Datensätze in MySQL einfügen

1. Idee Es dauerte nur 6 Sekunden, um 1.000.000 D...

MySQL-Indexprinzip und Analyse von Anwendungsbeispielen

Dieser Artikel veranschaulicht anhand von Beispie...

Ideen und Codes zur Realisierung des Lupeneffekts in js

In diesem Artikelbeispiel wird der spezifische Co...

Vue implementiert die Drag & Drop-Sortierfunktion der Seiten-Div-Box

vue implementiert die Drag & Drop-Sortierfunk...