在这里，我实现了在页面内进行图片展示，当鼠标移动到相应的图片上后，图片下方的文字介绍会上移，并完整显示，半透明的文字介绍会覆盖掉图片，当鼠标移开之后，文字又会回到原来的位置。
要实现这样的图片展示，我主要是通过改变文字介绍的top值来实现的。
在编码的过程中，我犯了一个错误，就是将js代码写在head标签内的时候并没有使用window.onload事件，导致页面功能受到影响。这样的情况，是因为没有保证页面加载完成。如果把这段js代码放在body结束标签前，就不会出错。
<!DOCTYPE html>
<html>
<head>
<title>文字上移</title>
<meta charset="utf-8">
<style type="text/css">
div{
width:280px;
height:290px;
float:left;
position:relative;
overflow:hidden;
}
a{
position:absolute;
top:270px;
left:0;
display:block;
text-decoration:none;
font-size:18px;
line-height: 20px;
font-weight: bold;
width:280px;
height:290px;
color:white;
background: #000;
opacity: 0.5;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
function showD(){
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].onmouseover=show;
divs[i].onmouseout=unshow;
}
}
function show(){
this.getElementsByTagName("a")[0].style.top=0;
}
function unshow(){
this.getElementsByTagName("a")[0].style.top=270+"px";
}
showD();
}
</script>
</head>
<body>
<div id="box1">
<img src="晋江封面.jpg">
<a href="#">我的第一本小说<br/>
在小说中描述了一段青梅竹马的故事
</a>
</div>
<div id="box2">
<img src="晋江封面.jpg">
<a href="#">我的第一本小说<br/>
在小说中描述了一段青梅竹马的故事
</a>
</div>
</body>
</html>
时间： 2025-01-12 14:07:42