Use jquery to move the mouse over and bring up more relevant information layer with source code download _ jquery

When we want to display more information in a limited space, we often move the mouse over to bring up more information layers to improve interaction. In particular, it can be used in the photo wall of the company, job seekers information display on recruitment websites, and so on. This article will share with you the use of jquery to achieve mouse sliding over the pop-up of more information layer with source code download, if you are interested in displaying more information in a limited space, we often move the mouse over to bring up more information layers to improve interaction. In particular, it can be applied to scenarios such as the company photo wall and information presentation of job seekers on recruitment websites.

In this article, we will share with you examples how to use jQuery to display slide images. When you move your mouse over a photo, a detailed description of the corresponding photo will pop up. See the demo:

Download the effect display source code

HTML

First, we prepare the page material, which consists of multiple sets of images.

Dense structure with the corresponding description of the image, used to display the detailed information.

     
  
  
     
   
   
 
Meng xiangyiBusiness ownersBuildingBeijing
 
...
  
  
 
 

CSS

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

.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 demonstrate the effect has been encapsulated in album. js. before calling the function, load the jquery. js and album. js files and then call the effect directly. See the Code: