Récemment, je fais un événement d'image de mouvement d'entrée et de sortie de souris. Vous pouvez essayer plusieurs méthodes.
Premièrement, il existe deux manières de modifier la résolution. La résolution du déplacement de la souris dans l'image et de la sortie de l'image est différente.
Première méthode
Copiez le code comme suit :
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liste d'images : déplacez la souris vers l'intérieur/l'extérieur pour modifier la transparence de l'image</title>
<style>
ul,li{marge :0;padding:0;list-style-type:aucun;}
#imgList{width: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{opacity:1;filter:alpha(opacity=100);}
</style>
<script>
window.onload = fonction ()
{
var oLi = document.getElementsByTagName("li");
pour (var i = 0; i < oLi.length; i++)
{
oLi[i].onmouseover = fonction ()
{
this.className = "actuel"
} ;
oLi[i].onmouseout = fonction ()
{
this.className = ""
}
}
}
</script></head>
<corps>
<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>
</corps>
</html>
Deuxième méthode
Copiez le code comme suit :
<script type="text/javascript">
fonction makevisible(cur, which){
si (qui==0)
cur.filters.alpha.opacity=100
autre
cur.filters.alpha.opacity=20
}
</script>
<corps>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( ceci,0)"/>
</corps>
Une autre méthode consiste à déplacer la souris vers l'intérieur et l'extérieur de l'image pour modifier la taille de l'image.
Ajoutez simplement du code à la balise <body> Lorsque la souris se déplace sur l'image, l'image s'agrandit en haut à droite, et lorsque la souris s'éloigne de l'image, elle revient à sa taille d'origine.
Copiez le code comme suit :
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>