怎么用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>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
开软件网络这方面的公司,我这样行吗?
我学过编程,但是也没什么做过大型的开发。现在有2年没做了,有点生疏。对一些软件只能说出需要什...
-
rational rose 2003
rational rose 2003原版的大小是多少?
今天在网上找了下,汉化版的只有11。3M,影象中好象这个软件蛮大的。
如果...
-
我的第一个Windows Phone 7应用程序
本来一直没有过做移动开发的想法,前短时间被CSDN一个移动大会“挑逗”的有点“心血来潮”!恰好...
-
页面保存值的问题???
一个Grid下面有两个单选按钮和一个子Grid,选中不同单选按钮,子Grid就显示不同的页面,而且这两个页面里边都有文本...
-
.Net程序中操作数据库不起作用了
建立的C#Windows窗体应用程序,为一个按键响应消息写入如下代码:
//打开数据库,并清...
-
这样会不会影响我的工作?
我脸上有挺严重的痘痘,这样去公司会不会影响自己的升职之类的?要是当项目经理的话形象肯定要过关,我这个情...
-
win7(32)下安装VS2008总是安装“运行时系统必备”出错,求救
我是装的联想OEM版的win7。安装的这个VS安装包以前在XP下使用是没问题...
-
求 iis 6.0 或者 7.0 下载地址
求 iis 6.0 或者 7.0 下载地址?
------解决方案--------------------
都是windows组件,不用单独下...
-
安装了.NET4.0 还需要安装3.5 3.0 2.0吗
安装了.NET4.0 还需要安装3.5 3.0 2.0吗
Microsoft .NET Framework 4.0最近出来了,那我如...
-
win7环境下可不可以装vs2003.net
求高手,若可以请说一下安装注意事项,谢谢
------解决方案--------------------
1.安装IIS 7;
具...