标签：
在这里，我实现了在页面内进行图片展示，当鼠标移动到相应的图片上后，图片下方的文字介绍会上移，并完整显示，半透明的文字介绍会覆盖掉图片，当鼠标移开之后，文字又会回到原来的位置。
要实现这样的图片展示，我主要是通过改变文字介绍的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>
标签：
原文地址：http://www.cnblogs.com/zhangtaiqingqing/p/5370298.html
