Use jquery to realize that the mouse slides over and pops up more relevant information layers with source code download_jquery

When we want to display more information in a limited space, we often slide the mouse over to pop up more relevant information layers to improve interactivity. It can especially be used in company photo walls, job seeker information display on recruitment websites, etc.

This article uses examples to share with you how to use jQuery to achieve the effect of sliding over pictures to display information. When the mouse slides over the photo, the detailed introduction information of the corresponding photo will pop up. Please see the demonstration effect:

Effect display Source code download

HTML

First of all, we prepare the page materials. The page is densely composed of multiple groups of pictures 25edfb22a4f469ecb59f1190150159c6. At the same time, there is relevant explanatory information corresponding to the pictures to show the detailed information effect.

<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

We need to use CSS to arrange the images closely together, and the information corresponding to the images is hidden by default.

.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

The js code used to display the effect has been encapsulated in album.js. Before calling, load the two files jquery.js and album.js, and then call the effect directly. Please see the code:

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

In album.js, jquery is used to control the positioning of elements, and when the mouse slides over, various relative position display effects are shown up, down, left, and right. Interested friends can check out the relevant code in album.js.

The above content is the editor’s introduction to using jquery to realize the pop-up of more relevant information layers when the mouse is rolled over. The source code download is attached. I hope you like it.