Este artículo describe el método de JS para lograr efectos especiales translúcidos y gradualmente reveladores en imágenes de nueve cuadrículas. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<title> Nine Grid Pictures Translucent y mostrando gradualmente el efecto </title>
<Body>
<Style type = text/css> .invisible {
Filtro: alfa (opacidad = 0)
}
</style>
<Script Language = JavaScript1.2>
<!-
function high (que2) {
TheObject = What2
resaltar = setInterval ("stoppectit (theObject)", 50)
}
función baja (que2) {
ClearInterval (resaltando)
cuyo2.filters.alpha.opacity = 0
}
función stoppectit (cur2) {
if (cur2.filters.alpha.opacity <100)
cur2.filters.alpha.opacity+= 10
más if (ventana.highlighting)
ClearInterval (resaltando)
}
//->
</script>
<Tabla BorderColor =#999999 CellSpacing = 8 CellPadding = 0 ancho = 302
borde = 0> <tbody>
<tr>
<Td width = 90 background = text1.gif bgcolor =#db4d0e
altura = 90> <a href = ""> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m01.jpg" borde = 0 ancho = 180px altura = 135px> </a> </td>
<Td width = 90 background = text2.gif bgcolor =#ff9f07> <a
href = "/"> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m02.jpg" borde = 0 ancho = 180px altura = 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"
border = 0 ancho = 180px altura = 135px> </a> </td> </tr>
<tr>
<Td fondos = text4.gif bgcolor =#ff9f07> <a
href = "/"> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m04.jpg" borde = 0 ancho = 180px altura = 135px> </a> </td>
<Td background = text5.gif bgcolor =#a5d523> <a
href = "/"> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m05.jpg" borde = 0 ancho = 180px altura = 135px> </a> </td>
<Td fondos = text6.gif bgcolor =#c56e19> <a
href = "/"> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m06.jpg" borde = 0 ancho = 180px altura = 135px> </a> </td> </tr>
<tr>
<Td background = text12.gif bgcolor =#ff9f07> <a
href = "/"> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m07.jpg" borde = 0 ancho = 180px altura = 135px> </a> </td>
<Td fondos = text8.gif bgcolor =#c56e19> <a
href = "/"> <img
class = invisible onMouseOver = high (this) onMouseOut = Low (this) src = "/images/m08.jpg"
border = 0 ancho = 180px altura = 135px> </a> </td>
<Td fondos = text7.gif bgcolor =#c56e19> <a
href = "/"> <img
class = invisible OnMouseOver = high (this) OnMouseOut = Low (this)
src = "/images/m09.jpg" borde = 0 width = 180px Height = 135px> </a> </td> </tr> </tbody> </table>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.