当前位置: 代码迷 >> .NET相关 >> 怎么用js实现以下效果?
  详细解决方案

怎么用js实现以下效果?

热度:4243   发布时间:2013-02-26 00:00:00.0
如何用js实现以下效果???
页面有九张图片,当鼠标移到第一张图片时显示第二张图片,鼠标移出时恢复,鼠标移动到第二张图片时,显示第三张图片,移开是恢复,以此类推。。。

------解决方案--------------------------------------------------------
<script>
function over(o) {
o.oldImage = o.src;
var nextId = parseInt(o.id.substr(3));
if (nextId == 9) nextId = 1;
else
nextId++;
o.src = document.getElementById("Img" + nextId).src;
}
function out(o) {
o.src = o.oldImage;

}
</script>
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img1"

img的id设置为id="Img1"到id="Img9"即可

例子
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>

<body>
<script>
function over(o) {
o.oldImage = o.src;
var nextId = parseInt(o.id.substr(3));
if (nextId == 9) nextId = 1;
else
nextId++;
o.src = document.getElementById("Img" + nextId).src;
}
function out(o) {
o.src = o.oldImage;

}
</script>
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img1" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img2" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img3" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img4" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img5" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img6" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img7" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img8" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img9" width="100" height="60" />
</body>


</html>

  相关解决方案