最近在做一個滑鼠移入移出圖片事件，有幾種方法大家可以試試看
首先是改變解析度的兩種方法，滑鼠移入圖片和移出圖片的解析度不同
方法一
複製代碼代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片清單：滑鼠移入/移出改變圖片透明度</title>
<style>
ul,li{margin:0;padding:0;list-style-type:none;}
#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 = function ()
{
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++)
{
oLi[i].onmouseover = function ()
{
this.className = "current"
};
oLi[i].onmouseout = function ()
{
this.className = ""
}
}
}
</script></head>
<body>
<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>
方法二
複製代碼代碼如下:
<script type="text/javascript">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
</script>
<body>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( this,0)"/>
</body>
還有一種方法是滑鼠移入移出圖片，改變圖片的大小
在<body>標籤中加入程式碼即可，滑鼠移動到圖片時圖片向右上變大，離開圖片變回原大小
複製代碼代碼如下:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>