Недавно я выполняю событие перемещения мыши внутрь и наружу изображения. Вы можете попробовать несколько методов.
Во-первых, изменить разрешение можно двумя способами. Разрешение перемещения мыши по изображению и выхода из него различается.
Способ первый
Скопируйте код кода следующим образом:
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Список изображений: перемещайте мышь вперед или назад, чтобы изменить прозрачность изображения</title>
<стиль>
ul, li {маржа: 0; дополнение: 0; тип стиля списка: нет;}
#imgList{ширина: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);}
</стиль>
<скрипт>
window.onload = функция ()
{
var oLi = document.getElementsByTagName("li");
for (var i = 0; i <oLi.length; i++)
{
oLi[i].onmouseover = функция ()
{
this.className = "текущий"
};
oLi[i].onmouseout = функция ()
{
this.className = ""
}
}
}
</script></head>
<тело>
<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>
</тело>
</html>
Способ второй
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
функция makevisible(cur,который){
если (который == 0)
cur.filters.alpha.opacity=100
еще
cur.filters.alpha.opacity=20
}
</скрипт>
<тело>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( это,0)"/>
</тело>
Другой метод — перемещать мышь внутрь и наружу изображения, чтобы изменить его размер.
Просто добавьте немного кода в тег <body>. Когда мышь перемещается на изображение, изображение увеличивается в правом верхнем углу, а когда мышь удаляется от изображения, оно возвращается к исходному размеру.
Скопируйте код кода следующим образом:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>