Cet article décrit la méthode de JS pour réaliser des effets spéciaux translucides et progressivement révélateurs sur des images à neuf grilles. 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> Neuf grid Pictures Translucentes et montrant progressivement Effet </Title>
<body>
<Style type = text / css> .invisible {
Filtre: Alpha (opacité = 0)
}
</ Style>
<Script Language = JavaScript1.2>
<! -
fonction élevée (qui2) {
theObject = qui2
Soulighing = setInterval ("highlightIt (theObject)", 50)
}
fonction bas (qui 2) {
ClearInterval (mise en évidence)
qui2.filters.alpha.opacity = 0
}
fonction highlightIt (cur2) {
if (cur2.filters.alpha.opacity <100)
cur2.filters.alpha.opacity + = 10
else if (window.highlighting)
ClearInterval (mise en évidence)
}
// ->
</cript>
<Table BorderColor = # 999999 CELLSPACINE = 8 CellPadding = 0 largeur = 302
bordure = 0> <tbody>
<tr>
<Td width = 90 background = text1.gif bgcolor = # db4d0e
height = 90> <a href = ""> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m01.jpg" border = 0 width = 180px hauteur = 135px> </a> </td>
<Td width = 90 background = text2.gif bgcolor = # ff9f07> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m02.jpg" border = 0 width = 180px hauteur = 135px> </a> </td>
<Td width = 90 background = text3.gif bgcolor = # ff9f07> <a
href = ""> <img class = invisible
onMouseOver = High (this) onMouseout = Low (this) src = "/ images / m03.jpg"
bordure = 0 largeur = 180px hauteur = 135px> </a> </td> </tr>
<tr>
<Td background = text4.gif bgcolor = # ff9f07> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m04.jpg" border = 0 width = 180px hauteur = 135px> </a> </td>
<Td background = text5.gif bgcolor = # a5d523> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m05.jpg" border = 0 width = 180px hauteur = 135px> </a> </td>
<Td background = text6.gif bgcolor = # c56e19> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m06.jpg" border = 0 width = 180px height = 135px> </a> </td> </tr>
<tr>
<Td background = text12.gif bgcolor = # ff9f07> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m07.jpg" border = 0 width = 180px hauteur = 135px> </a> </td>
<Td background = text8.gif bgcolor = # c56e19> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this) src = "/ images / m08.jpg"
bordure = 0 largeur = 180px hauteur = 135px> </a> </td>
<Td background = text7.gif bgcolor = # c56e19> <a
href = "/"> <img
classe = invisible onMouseOver = High (this) onMouseout = Low (this)
src = "/ images / m09.jpg" border = 0 width = 180px height = 135px> </a> </td> </tr> </tbody> </ table>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.