如何实现鼠标放在图片上出现文字说明效果？

最近在浏览网页时，看到一些图片，鼠标一放上去呢，就会有说明文字“浮”上来，移开又“沉”下去，感觉好炫！自己就在网上找实现代码啊，看看事件是怎么实现的！然后就找到了如下的代码：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.main{
width:738px;
height:280px;
margin:0px auto;
border:5px solid #696;
position:relative;
}
a{text-decoration:none}
.main .cite{
width:738px;
position:absolute;
bottom:0px;
left:0px;
text-align:center;
-moz-opacity:0.5;
filter:alpha(opacity=50);
opacity:0.5;
background:#333;
border-bottom:2px solid #000;
border-top:2px solid #000;
color:white;
overflow:hidden;
display:none;
}
.main .word{
position:absolute;
height:0px;
width:738px;
text-align:center;
bottom:0px;
left:0px;
color:white;
display:block;
overflow:hidden;
}
</style>
<script type="text/javascript">
var speed=10;
var citeH=0;
var flag;
window.onload=function(){
var cite=document.getElementById("cite");
var word=document.getElementById("word");
var main=document.getElementById("main");
function addHeight(){
clearInterval(flag);
cite.style.display="block";
if(citeH<86){
citeH=citeH+1;
cite.style.height=citeH+"px";
word.style.height=citeH+"px";
}
else{
clearInterval(flag);
return;
}
flag=setInterval(addHeight,speed);
}
function reduceHeight(){
clearInterval(flag);
if(citeH>0){
citeH=citeH-1;
cite.style.height=citeH+"px";
word.style.height=citeH+"px";
}
else{
clearInterval(flag);
cite.style.display="none";
return;
}
flag=setInterval(reduceHeight,speed);
}
if(main.addEventListener){
main.addEventListener("mouseover",addHeight,false);
main.addEventListener("mouseout",reduceHeight,false);
}
else{
main.attachEvent("onmouseover",addHeight);
main.attachEvent("onmouseout",reduceHeight);
}
}
</script>
</head>
<body>
<div class="main" id="main">
<a href="#">
<img src="1.jpg" border="0">
<div class="cite" id="cite"></div>
<div class="word" id="word">爱护大自然，共享自然风光</div>
</a>
</div>
</body>
</html>

恩呢，放在编译器里，的确有效果，的确是我想象中的那样，可是，我自己感觉写的太复杂了，挺简单的一个问题对吧？然后就自己写了，刚开始有点小问题，不知道怎么实现那个上浮效果，最后想到了overflow这个属性，写出了以下代码：

[html] view plain copy

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="txex/html charset=utf-8" >
<script src="jquery-1.11.1.js"></script>
<style type="text/css">
body{
font-family: simhei;
}
p{
color: #ffffff;
}
div{
overflow: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".pic").mouseover(function()
{ $(".he").animate({top:'280px'},500);})
$(".pic").mouseout(function()
{$(".he").animate({top:'330px'},500);}
)
});
</script>
</head>
<body>
<div style="position: relative">
<img src="test.png" class="pic">
<div style="width:231px;height: 50px;background-color: orange;position: absolute;top:330px" class="he">
<p align="center" >开始答题</p>
</div>
</div>
</body>
</html>

来源：https://www.cnblogs.com/woodyliang/p/6497695.html

标签

娱乐新闻