如何实现图片onmouseover缓慢出现内容
像这种效果：http://abduzeedo.com/tags/photography
crying_boy帮忙写了段JS，可以实现鼠标移上图片可以实现内容在图片上，请问，如果要像此网站一样让内容缓慢出现，应该如何做，谢谢！
这是crying_boy朋友写的：
- HTML code
<!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">#imglist div{width:192px; height:192px; position:relative;}#imglist div span{font-size:18px; background-image:url(a2.png);width:192px; height:18px; text-align:center; float:left;position:absolute;display:none;left:0;bottom:0;}</style><script type="text/javascript">window.onload=function(){ var imgs=document.getElementById("imglist").getElementsByTagName("div"); for(i=0;i<imgs.length;i++) { imgs[i].onmouseover=function(){ this.getElementsByTagName("span")[0].style.display='block'; }; imgs[i].onmouseout=function(){ this.getElementsByTagName("span")[0].style.display='none'; } }}</script></head><body><div id="imglist"><div><img src="show3.jpg"/><span>11111111111111111111</span></div><div><img src="show1b.jpg"/><span>2222222222222222222</span></div></div></body></html>[解决办法]
修正一个bug，隐藏的内容会越滚越高
- HTML code
<!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">#imglist{float:left;width:500px;height:100px}#imglist ul{float:left;width:500px; list-style:none;height:100px;}#imglist ul li{float:left;width:200px;height:100px;position:relative; overflow:hidden;}#imglist ul li img{float:left;width:200px;height:100px;}#imglist ul li span{float:left;width:200px;position:absolute;display:none; font-family:Arial; font-size:9px;left:0;bottom:0;}</style><script type="text/javascript">/* a:要显示的对象 b:a对应的图片的高度 c:要显示对象的高度 d:a移动的速度,毫秒为单位 e:a每次的移动量*/function slideUp(a,b,c,d,e){ var minTop=parseInt(b)-parseInt(c); if(parseInt(a.style.top)<minTop){return;} a.style.top=(parseInt(a.style.top)-parseInt(e))+"px"; setTimeout(function (){slideUp(a,b,c,d,e)},d)}function bindList(){ var imgs=document.getElementById("imglist").getElementsByTagName("li"); for(i=0;i<imgs.length;i++){ imgs[i].onmouseover=function(){ var _span=this.getElementsByTagName("span")[0]; var imgheight=this.clientHeight; _span.style.display='block'; var _spanH=_span.clientHeight; _span.style.height=_spanH+"px"; _span.style.top=imgheight+"px"; setTimeout(function (){slideUp(_span,imgheight,_spanH,200,3)},200) }; imgs[i].onmouseout=function(){ var _span=this.getElementsByTagName("span")[0]; this.getElementsByTagName("span")[0].style.display='none'; } }}window.onload=function(){bindList();}</script></head><body><div id="imglist"><ul><li><img src="1.gif"/><span>1111111111111111111111111111111</span></li><li><img src="1.gif"/><span>2222222222222222222222222222222</span></li></ul></div></body></html>