javascript实现图片相册效果-Javascript-技术教程-asp编程网

javascript实现图片相册效果

2009-04-24 07:10:20 来源：www.aspprogram.cn 作者：佚名浏览量:1968 收藏

效果：一组图片，当鼠标移动到图片上去，可以看到图片放大的效果，当鼠标离开时，图片恢复到原来的大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片欣赏</title>
<style type="text/css">
body{ font-size:12px;}
#bottom{ width:390px; border:solid 1px #003366; text-align:center; padding-bottom:10px; height:120px;position:relative;z-index:0;}
#a0{ height:70px; width:auto; border:solid 2px #000000; position:absolute; left:5px; bottom:10px;z-index:0;}
#a1{ height:70px; width:auto; border:solid 2px #000000; position:absolute; left:98px; bottom:10px;z-index:0;}
#a2{ height:70px; width:auto; border:solid 2px #000000; position:absolute; right:124px; bottom:10px;z-index:0;}
#a3{ height:70px; width:auto; border:solid 2px #000000; position:absolute; right:24px; bottom:10px;z-index:0;}
.bottom_top{ height:20px; background:#003366; color:#FFFFFF; font-family:"黑体"; line-height:20px; text-align:left;}
</style>
<script type="text/javascript">
function ch(e)
{
var oRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
iNum=parseInt(e.slice(1));
a=parseInt(oRules[iNum+2].style.height);
for(;a<120;a++)
{
oRules[iNum+2].style.height=a+"px";
oRules[iNum+2].style.width="auto";
oRules[iNum+2].style.zIndex=1;
}
}
function re(e)
{
var oRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
iNum=parseInt(e.slice(1));
a=parseInt(oRules[iNum+2].style.height);
for(;70<a;a--)
{
oRules[iNum+2].style.height=a+"px";
oRules[iNum+2].style.width="auto";
oRules[iNum+2].style.zIndex=0;
}
}
</script>
</head>
<body>
<div id="bottom">
    <div class="bottom_top" style="background:#ff0000">图片欣赏</div>
    <img id="a0" onmouseover="ch('a0')" onmouseout="re('a0')" src="http：//www.aspprogram.cn/pic/001.jpg" border=0/>
    <img id="a1" onmouseover="ch('a1')" onmouseout="re('a1')" src="http：//www.aspprogram.cn//pic/002.jpg" border=0/>
    <img id="a2" onmouseover="ch('a2')" onmouseout="re('a2')" src="http：//www.aspprogram.cn//pic/003.jpg" border=0/>
    <img id="a3" onmouseover="ch('a3')" onmouseout="re('a3')" src="http：//www.aspprogram.cn//pic/004.jpg" border=0/>
</div>
</body>
</html>

javascript实现图片相册效果

最新相关教程

热门教程

推荐教程