jQuery中怎么實現滑過圖片展示信息效果

今天就跟大家聊聊有關jQuery中怎么實現滑過圖片展示信息效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

HTML

首先我們準備頁面素材，頁面上由多組圖片<li>密集組成，同時有圖片對應的相關說明信息，用于展示詳細信息效果。

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

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中怎么實現滑過圖片展示信息效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。