最近在做一个鼠标移入移出图片事件，有几种方法大家可以试一下
首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同
方法一
复制代码代码如下:
< html xmlns="http://www.**w*3.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"/ >