使用jquery實現(xiàn)鼠標滑過彈出更多相關信息層附源碼下載
當要在有限的空間展示更多的信息時,我們經(jīng)常會采取鼠標滑過彈出更多相關信息層,提高互動性。尤其可以應用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場景。
本文結合實例和大家分享下使用jQuery實現(xiàn)滑過圖片展示信息效果。當鼠標滑向照片時,會彈出對應的照片的詳細介紹信息,請看演示效果:
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>企業(yè)主</span><span><i>建筑 </i><i>北京市</i></span></div> </li> ... </ul> </div>
CSS
我們需要使用CSS將圖片緊密排列在一起,并且默認圖片對應的信息為隱藏狀態(tài)。
.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代碼已經(jīng)封裝在album.js,在調(diào)用前先加載jquery.js和album.js兩個文件,然后直接調(diào)用效果,請看代碼:
<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中的相關代碼。
以上內(nèi)容是小編給大家介紹的使用jquery實現(xiàn)鼠標滑過彈出更多相關信息層附源碼下載的全部內(nèi)容,希望大家喜歡。
- jquery鼠標放上去顯示懸浮層即彈出定位的div層
- Jquery利用mouseenter和mouseleave實現(xiàn)鼠標經(jīng)過彈出層且可以點擊
- Jquery中國地圖熱點效果-鼠標經(jīng)過彈出提示層信息的簡單實例
- jQuery實現(xiàn)鼠標點擊彈出漸變層的方法
- jQuery Dialog 彈出層對話框插件
- 基于jquery的模態(tài)div層彈出效果
- jquery實現(xiàn)居中彈出層代碼
- jQuery彈出層始終垂直居中相對于屏幕或當前窗口
- jQuery拖動div、移動div、彈出層實現(xiàn)原理及示例
- JQuery彈出層示例可自定義
- jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能
相關文章
jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法
這篇文章主要介紹了jQuery控制input只能輸入數(shù)字和兩位小數(shù)的相關知識,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Jquery操作radio,checkbox,select表單操作實現(xiàn)代碼
Jquery操作radio,checkbox,select表單操作實現(xiàn)代碼,需要用jquery操作表單的朋友可以參考下。2010-04-04如何從jQuery的ajax請求中刪除X-Requested-With
X-Requested-With常用于判斷是不是ajax請求,ajax請求中刪除X-Requested-With的方法如下,感興趣的朋友可以參考下2013-12-12jQuery+ajax實現(xiàn)動態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實現(xiàn)動態(tài)添加表格tr td功能,結合實例形式分析了jQuery基于ajax動態(tài)創(chuàng)建頁面table元素相關操作技巧,需要的朋友可以參考下2018-04-04