Display text description code when JavaScript mouse slides across picture

When you want to show more information in a limited space, we often take the mouse to slide over the pop-up more relevant information layer to improve interactivity. Especially can be applied in the company photo wall, recruitment site job seekers information display and so on scene.
This article unifies the example and everybody to share under uses the jquery implementation to slide over the picture demonstration information effect. When the mouse slides to the photo, will pop up the corresponding photos of detailed information, see the Demo effect:

First of all, we prepare the page material, the page by a group of pictures <li> dense composition, at the same time there are pictures corresponding to the relevant information, for the display of detailed information effects.

code is as follows	copy code
<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> Mengxiangyi </strong><span> Business owners </span><span><i> Architecture </i><i> Beijing </i></span></div>          </li>         ...       </ul> </div>

Css
We need to use CSS to put the pictures together tightly, and the default picture corresponds to the hidden state of the information.

The code is as follows

Copy Code

. 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%;p osition:absolute; top:0px; left:0px; display:none; 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

Show the effect of the JS code has been encapsulated in Album.js, before the call to load Jquery.js and album.js two files, and then call the effect directly, see the code:

The code is as follows	Copy 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 the album.js, through the jquery control element localization, as well as the mouse slippery outdated, each kind of relative upper and lower position displays the effect, the interested friend may look over the Album.js the related code.