1. 爱易网页
  2. C#教程
  3. 怎么用js实现以上效果？

怎么用js实现以上效果？

日期：2014-05-20　 浏览次数：20728 次

如何用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>

相关资料更多>

  1. winform版的datagrid中的数据怎么防止被复制，就是做出类似label的效果
  2. 怎么用KeyDown事件捕获小键盘的数字
  3. 求教高手，想实现：点击listbox某项后在picturebox相应坐标上绘制一个点解决思路
  4. 调试时：未处理的“System.Resources.MissingManifestResourceException”类型的错误出现在 mscorlib.dll 中
  5. GDI 3D效果解决方案
  6. ~项目打不开了
  7. 4byte合成一个Int解决方案
  8. .net winform 程序中，程序连接远程sql数据库，默认端口是1433，想换个端口连接，需要在程序连接数据库字符串和远程sql数据库如何操作才
  9. ，用VS2008开发系统后登录时遇到的有关问题