任海波博客

在网页中经常使用缩略图的方法，太大的图片会影响到网页打开的速度。有时候缩略图会很不清楚，需要查看原来的大图，使用这种方式就很方便了，不用再新开一个窗口了。Hypo从CSDN上找到了下面的代码。

以下是CSS代码部分：
<style>
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#eeeeee;padding:5px;left:-10000px;border:0px dashed gray;visibility:hidden;color:black;text-decoration:none;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:20px;left:60px;right:60px;bottom:10px}
</style>

调用图片时应使用的代码（示例）：
<div>
  <a class="thumbnail" href="http://www.renhaibo.com/1.jpg" target="_blank">
    <img src="http://www.renhaibo.com/1.jpg" width="160" height="200px">
    <span>
      <img src="http://www.renhaibo.com/1.jpg">
    </span>
  </a>
</div>

虽然效果还不是很完美，但已经很不错了。

转载请注明，转自：RenHaibo.com
本文链接地址：http://www.renhaibo.com/archives/59.html