Utilisez jquery pour réaliser que la souris glisse et affiche des couches d'informations plus pertinentes avec le code source download_jquery

Lorsque nous souhaitons afficher plus d'informations dans un espace limité, nous faisons souvent glisser la souris pour faire apparaître des couches d'informations plus pertinentes afin d'améliorer l'interactivité. Il peut notamment être utilisé dans les murs de photos d’entreprises, l’affichage d’informations sur les demandeurs d’emploi sur les sites de recrutement, etc.

Cet article utilise des exemples pour partager avec vous comment utiliser jQuery pour obtenir l'effet de glisser sur des images pour afficher des informations. Lorsque la souris glisse sur la photo, les informations d'introduction détaillées de la photo correspondante apparaîtront. Veuillez voir l'effet de démonstration :

.

Affichage des effets Téléchargement du code source

HTML

Tout d'abord, nous préparons le matériel de la page. La page est densément composée de plusieurs groupes d'images

. En même temps, il y a des informations explicatives pertinentes correspondant aux images pour montrer l'effet d'information détaillé.

<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

Nous devons utiliser CSS pour organiser les images de manière rapprochée, et les informations correspondant aux images sont masquées par défaut.

.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

Le code js utilisé pour afficher l'effet a été encapsulé dans album.js Avant d'appeler, chargez les deux fichiers jquery.js et album.js, puis appelez directement l'effet :

.

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

Dans album.js, jquery est utilisé pour contrôler le positionnement des éléments, et lorsque la souris glisse dessus, divers effets d'affichage de position relative sont affichés vers le haut, le bas, la gauche et la droite. Les amis intéressés peuvent consulter le code correspondant dans. album.js.

Le contenu ci-dessus est l'introduction de l'éditeur à l'utilisation de jquery pour réaliser l'apparition de couches d'informations plus pertinentes lorsque la souris est survolée. Le téléchargement du code source est joint.