请问如何实现此种效果：移上图片，显示介绍和链接

请问如何实现，当鼠标移上一张图片，在此张图片上显示一个半透明的色块，并且可以显示文字或链接，像这种效果：http://abduzeedo.com/tags/photography请问这种效果如何实现

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

很多解决方法
1：与这个图片的同级结构中存在另一个容器，当鼠标上移时显示那个容器就可以了
2：单独一个层，可以在任意位置，专门用来显示这些文本的。对这个层设置样式：style="position:absolute"
当鼠标移到图片上时，取得图片在页面中的坐标x和y，然后更改其样式
单独层.style.left=x;
单独层.style.top=y;//这个top位置再考究下就是了,比如：y+图片的高-单独层的高
<!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;}
#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">
window.onload=function(){
    var imgs=document.getElementById("imglist").getElementsByTagName("li");
    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">
<ul>
<li><img src="1.gif"/><span>1111111111111111111111111111111</span></li>
<li><img src="1.gif"/><span>2222222222222222222222222222222</span></li>
</ul>
</div>
</body>
</html>
直接复制去试试，下面的两个图片，你换成自己的
<!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;}
#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">
window.onload=function(){
  var imgs=document.getElementById("imglist").getElementsByTagName("li");
  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">
<ul>
<li><img src="1.gif"/><span>1111111111111111111111111111111</span></li>
<li><img src="1.gif"/><span>2222222222222222222222222222222</span></li>
</ul>
</div>
</body>
</html>
请问，如果要实现像那网站一样，移上图片时，<span>缓慢显示的效果，应该如何修改，谢谢！改了一下，效果很接近，不过就是在显示的效果不一样，这些移上去就直接显示，
<!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>
那个网站用的是jquery实现的，想原生实现的话js就要修正了，大概的思路是，设置一个时长，一个每次移动的位移去实现你说的渐变效果
<!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)
}
window.onload=function(){
  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.top=imgheight+"px";
      setTimeout(function (){slideUp(_span,imgheight,_spanH,200,3)},200)
  };
  imgs[i].onmouseout=function(){
  this.getElementsByTagName("span")[0].style.display='none';
  }
  }
}</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>
修正一个bug，隐藏的内容会越滚越高<!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>