最近、マウスの移動画像イベントを実行しています。いくつかの方法を試すことができます。
まず、解像度を変更する方法は 2 つあり、マウスを画像内に移動するときと画像から移動するときの解像度が異なります。
方法 1
次のようにコードをコピーします。
<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;オーバーフロー:非表示;ズーム:1;ボーダー:1px 実線 #333;マージン:0 自動;パディング: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 = function ()
{
this.className = "現在"
};
oLi[i].onmouseout = function ()
{
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>
</body>
</html>
方法 2
次のようにコードをコピーします。
<script type="text/javascript">
関数 makevisible(cur,that){
if (どれ==0)
cur.filters.alpha.opacity=100
それ以外
cur.filters.alpha.opacity=20
}
</script>
<本文>
<img src="../../Content/主題/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible(これ、0)"/>
</body>
もう 1 つの方法は、マウスを画像内外に移動して画像のサイズを変更することです。
<body> タグにコードを追加するだけで、マウスを画像に移動すると画像が右上に拡大され、マウスが画像から離れると元のサイズに戻ります。
次のようにコードをコピーします。
<img src="../../Content/主題/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>