使用jQuery实现滑过图片展示信息效果

最新推荐文章于 2021-06-09 15:31:00 发布

zeyu1021

最新推荐文章于 2021-06-09 15:31:00 发布

阅读量385

点赞数

原文：http://www.helloweba.com/view-blog-260.html

查看演示下载源码

本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果。当鼠标滑向照片时，会弹出对应的照片的详细介绍信息，请看演示效果：

HTML

首先我们准备页面素材，页面上由多组图片<li>密集组成，同时有图片对应的相关说明信息，用于展示详细信息效果。

 
<div class="demo"> 
       <ul id="Album"> 
        <li><a href="#" ><em></em><img src="images/2012/05/18/tiezhu18274938.jpg" /></a> 
              <div class="Album_info"><strong>孟祥义</strong><span>企业主</span><span><i>建筑 
</i><i>北京市</i></span></div> 
        </li> 
        ... 
      </ul> 
</div>

CSS

我们需要使用CSS将图片紧密排列在一起，并且默认图片对应的信息为隐藏状态。

 
.demo{width: 714px; margin:50px auto;} 
#Album li,#Album { list-style: none;} 
#Album{ position: relative; background: url(images/loader.gif) no-repeat center; height: 203px;} 
#Album li { float: left; margin:1px 1px 0px 0px; display: inline;} 
#Album li img { width: 50px; height: 50px;} 
#Album .album_big {float: right;} 
#Album .album_big span { width: 43px; height: 31px; background: url(images/you_s.png); position:  
absolute; right: 0px;bottom: 0px; margin: 0px; padding: 0px; text-indent: -999px; overflow: hidden;} 
.album_big img { width: 101px!important; height: 101px!important;} 
#Album .album_big a { width: 101px!important;height: 101px!important;} 
#Album li strong { display: block; color: #fff; font-size: 12px; line-height: 16px;  
padding: 0px 10px;margin-top: 8px;white-space: nowrap;} 
#Album li span { display: block; color: #fff; font-size: 12px; line-height: 16px;  
padding: 0px 10px; margin-top: 5px; white-space: nowrap;} 
#Album li a { position: absolute; z-index: 100; visibility: hidden;} 
#Album li a em{ width: 100%;position: absolute; top: 0px; left: 0px; display: none; opacity: 0.5;  
filter: alpha(opacity=50); background: #000000;} 
#Album img { border: 0px; border: none;} 
#Album .Album_info { display: none; position: absolute; background: #4bae41; z-index:101; 
-moz-box-shadow: 0 0 10px #000000;-webkit-box-shadow: 0 0 10px #000000;box-shadow: 0 0 10px #000000;} 
#Album .Album_info i{  font-size: 12px; margin-right: 5px; font-style: normal; font-weight: normal;}

jQuery

展示效果所用的js代码已经封装在album.js，在调用前先加载jquery.js和album.js两个文件，然后直接调用效果，请看代码：

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/album.js"></script> 
<script> 
Album.set('#Album'); 
</script>