當要在有限的空間展示更多的資訊時，我們經常會採取滑鼠滑過彈出更多相關資訊層，提高互動性。尤其可以應用在公司照片牆、招募網站求職者資訊展示等等場景。
本文結合實例和大家分享下使用jQuery實現滑過圖片展示資訊效果。當滑鼠滑向照片時，會彈出對應的照片的詳細介紹信息，請看演示效果：
HTML
首先我們準備頁面素材，頁面上由多組圖片
<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> 在album.js中，透過jquery控制元素的定位，，以及滑鼠滑過時，各種相對上下左右的位置展示效果，有興趣的朋友可以翻看下album.js中的相關程式碼。
以上內容是小編給大家介紹的使用jquery實現滑鼠滑過彈出更多相關資訊層附源碼下載的全部內容，希望大家喜歡。
