jquery を使用して、マウスをスライドさせると、ソース コード download_jquery を使用して、より関連性の高い情報レイヤーがポップアップすることを認識します。

限られたスペースでより多くの情報を表示したい場合、インタラクティブ性を向上させるために、マウスをスライドさせてより関連性の高い情報レイヤーをポップアップさせることがよくあります。特に企業のフォトウォールや採用サイトの求職者情報表示などに活用できます。

この記事では例を使用して、jQuery を使用して画像をスライドさせて情報を表示する効果を実現する方法を説明します。マウスを写真の上にスライドさせると、対応する写真の詳細な紹介情報がポップアップ表示されます。デモ効果をご覧ください:

エフェクト表示 ソースコードダウンロード

HTML

まず、ページ素材を用意します。ページは複数の写真グループで構成されています。同時に、詳細な情報効果を示すために、写真に対応する関連説明情報も用意されています。

<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

画像を密に配置するには CSS を使用する必要がありますが、画像に対応する情報はデフォルトでは非表示になっています。

.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

エフェクトの表示に使用される js コードは、album.js にカプセル化されています。呼び出す前に、jquery.js と album.js の 2 つのファイルをロードして、コードを直接呼び出してください。

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

album.js では、要素の位置を制御するために jquery が使用されており、マウスをスライドさせると、上下左右にさまざまな相対位置表示効果が表示されます。興味のある方は、関連するコードをチェックしてください。アルバム.js。

上記の内容は、マウスをロールオーバーしたときに、より関連性の高い情報レイヤーのポップアップを実現するためのエディターの紹介です。気に入っていただければ幸いです。