专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > .NET相关

怎么用js实现以下效果?

发布时间:2011-06-26 21:15:11 文章来源:www.iduyao.cn 采编人员:星星草
如何用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>

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: