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

怎么用js实现以上效果?

热度:4243   发布时间:2013-02-26 00:00:00.0
如何用js实现以下效果???
页面有九张图片,当鼠标移到第一张图片时显示第二张图片,鼠标移出时恢复,鼠标移动到第二张图片时,显示第三张图片,移开是恢复,以此类推。。。
------解决方案--------------------------------------------------------
本帖最后由 net_lover 于 2011-07-23 21:31:50 编辑
<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>

  相关解决方案