Cet article décrit la méthode de JavaScript pour réaliser l'affichage progressif de la lecture d'image. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<Title> La boucle d'image affiche progressivement le code de l'effet de lecture </Title>
<adal>
<! - 1. Insérez le code suivant entre le <Aad> </ Head> du HEML: ->
<Script Language = JavaScript>
<! - //
sandra0 = nouvelle image ();
sandra0.src = "/images/m01.jpg";
sandra1 = nouvelle image ();
sandra1.src = "/images/m02.jpg";
sandra2 = nouvelle image ();
sandra2.src = "/images/m03.jpg";
var i_strngth = 1
var i_image = 0
var imageUrl = new Array ()
imageurl [0] = "/ images / m01.jpg"
ImageUrl [1] = "/ images / m02.jpg"
ImageUrl [2] = "/ images / m03.jpg"
fonction showImage () {
if (document.all) {
if (i_strngth <= 110) {
Tesimage.innerHtml = "<img style = 'filter: alpha (opacity =" + i_strngth + ")' src =" + imageurl [i_image] + "border = 0>";
i_strngth = i_strngth + 10
var timer = setTimeout ("showImage ()", 100)
}
autre {
ClearTimeout (temporisateur)
var timer = setTimeout ("hideimage ()", 1000)
}
}
if (document.layers) {
ClearTimeout (temporisateur)
document.testemage.document.write ("<img src =" + imageurl [i_image] + "border = 0>")
document.close ()
i_image ++
if (i_image> = imageurl.length) {i_image = 0}
var timer = setTimeout ("showImage ()", 2000)
}
}
fonction hideimage () {
if (i_strngth> = - 10) {
Tesimage.innerHtml = "<img style = 'filter: alpha (opacity =" + i_strngth + ")' src =" + imageurl [i_image] + "border = 0>";
i_strngth = i_strngth-10
var timer = setTimeout ("hideimage ()", 100)
}
autre {
ClearTimeout (temporisateur)
i_image ++
if (i_image> = imageurl.length) {i_image = 0}
i_strngth = 1
var timer = setTimeout ("showImage ()", 500)
}
}
// ->
</cript>
</ head>
<body>
<! - 2. Modifiez la déclaration <body> à: ->
<body onload = "showImage ()">
<! - 3. Ajoutez le code suivant au <body> </ body> de HEML: en haut: 120px; Gauche: 240px peut définir la position d'affichage ->
<div id = "Tesimage" Style = "Position: Absolute; Visibilité: Visible; Top: 120px; gauche: 240px"> </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.