Recientemente estoy haciendo un evento de movimiento del mouse hacia adentro y hacia afuera de la imagen. Hay varios métodos que puedes probar.
Primero, hay dos formas de cambiar la resolución. La resolución de mover el mouse dentro y fuera de la imagen es diferente.
Método uno
Copie el código de código de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<title>Lista de imágenes: mueva el mouse hacia adentro/afuera para cambiar la transparencia de la imagen</title>
<estilo>
ul,li{margin:0;padding:0;list-style-type:none;}
#imgList{ancho:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
#imgList li.current img{opacidad:1;filtro:alfa(opacidad=100);}
</estilo>
<guión>
ventana.onload = función ()
{
var oLi = document.getElementsByTagName("li");
para (var i = 0; i < oLi.length; i++)
{
oLi[i].onmouseover = función ()
{
this.className = "actual"
};
oLi[i].onmouseout = función ()
{
this.className = ""
}
}
}
</script></head>
<cuerpo>
<ul id="imgList">
<li><img src="/jscss/demoimg/201203/kitesky_com_car1.jpg" /></li>
<li><img src="/jscss/demoimg/201203/kitesky_com_car2.jpg" /></li>
</ul>
</cuerpo>
</html>
Método dos
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
función makevisible(cur,cuál){
si (que == 0)
cur.filters.alpha.opacity=100
demás
cur.filters.alpha.opacity=20
}
</script>
<cuerpo>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( esto,0)"/>
</cuerpo>
Otro método es mover el mouse dentro y fuera de la imagen para cambiar el tamaño de la misma.
Simplemente agregue algo de código a la etiqueta <body>. Cuando el mouse se mueve hacia la imagen, la imagen se hará más grande en la esquina superior derecha, y cuando el mouse se aleja de la imagen, volverá al tamaño original.
Copie el código de código de la siguiente manera:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>