Recentemente, estou realizando um evento de entrada e saída de imagem do mouse. Existem vários métodos que você pode tentar.
Primeiro, existem duas maneiras de alterar a resolução. A resolução de mover o mouse para dentro e para fora da imagem é diferente.
Método um
Copie o código do código da seguinte forma:
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lista de imagens: Mova o mouse para dentro/para fora para alterar a transparência da imagem</title>
<estilo>
ul,li{margem:0;padding:0;tipo de estilo de lista:none;}
#imgList{largura:700px;overflow:oculto;zoom:1;borda:1px sólido #333;margem:0 automático;preenchimento:0 0 10px 10px;}
#imgList li{float:esquerda;largura:128px;altura:128px;borda:1px sólido #ccc;margem:10px 10px 0 0;}
#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
#imgList li.current img{opacidade:1;filter:alpha(opacidade=100);}
</estilo>
<roteiro>
janela.onload=função()
{
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.comprimento; i++)
{
oLi[i].onmouseover = função()
{
this.className = "atual"
};
oLi[i].onmouseout=função()
{
this.className = ""
}
}
}
</script></head>
<corpo>
<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>
</body>
</html>
Método dois
Copie o código do código da seguinte forma:
<script type="texto/javascript">
função tornar visível(cur,que){
se (qual==0)
cur.filters.alpha.opacity=100
outro
cur.filters.alpha.opacity=20
}
</script>
<corpo>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( isso,0)"/>
</body>
Outro método é mover o mouse para dentro e para fora da imagem para alterar o tamanho da imagem.
Basta adicionar algum código à tag <body>. Quando o mouse se move para a imagem, a imagem ficará maior no canto superior direito e, quando o mouse se afastar da imagem, ela retornará ao tamanho original.
Copie o código do código da seguinte forma:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>