Verwenden Sie jquery, um zu erkennen, dass die Maus mit dem Quellcode download_jquery darüber gleitet und relevantere Informationsebenen anzeigt

Wenn wir mehr Informationen auf begrenztem Raum anzeigen möchten, fahren wir oft mit der Maus darüber, um relevantere Informationsebenen anzuzeigen und die Interaktivität zu verbessern. Es kann insbesondere für Firmenfotowände, die Anzeige von Informationen für Arbeitssuchende auf Stellenbörsen usw. verwendet werden.

In diesem Artikel erfahren Sie anhand von Beispielen, wie Sie mit jQuery den Effekt erzielen, dass Sie über Bilder gleiten, um Informationen anzuzeigen. Wenn Sie mit der Maus über das Foto fahren, werden die detaillierten Einführungsinformationen des entsprechenden Fotos angezeigt. Bitte sehen Sie sich den Demonstrationseffekt an:

Effektanzeige Quellcode-Download

HTML

Zuerst bereiten wir die Seitenmaterialien vor. Die Seite besteht aus mehreren Bildgruppen. Gleichzeitig gibt es relevante erklärende Informationen zu den Bildern, um den detaillierten Informationseffekt zu zeigen.

<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

Wir müssen CSS verwenden, um die Bilder eng aneinander anzuordnen, und die den Bildern entsprechenden Informationen werden standardmäßig ausgeblendet.

.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

Der zum Anzeigen des Effekts verwendete js-Code wurde in album.js gekapselt. Laden Sie vor dem Aufruf die beiden Dateien jquery.js und album.js und rufen Sie dann den Code direkt auf:

<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 wird jquery verwendet, um die Positionierung von Elementen zu steuern. Wenn Sie mit der Maus darüber fahren, werden verschiedene relative Positionsanzeigeeffekte nach oben, unten, links und rechts angezeigt. Interessierte Freunde können sich den entsprechenden Code ansehen album.js.

Der obige Inhalt ist eine Einführung des Herausgebers in die Verwendung von JQuery, um das Popup relevanterer Informationsebenen zu realisieren, wenn die Maus darüber bewegt wird. Der Download des Quellcodes ist beigefügt.