Gunakan jquery untuk menyedari bahawa tetikus meluncur ke atas dan muncul lapisan maklumat yang lebih relevan dengan kod sumber download

Gunakan jquery untuk menyedari bahawa tetikus meluncur ke atas dan muncul lapisan maklumat yang lebih relevan dengan kod sumber download_jquery

WBOY

Lepaskan： 2016-05-16 15:30:36

asal

1215 orang telah melayarinya

Apabila kami ingin memaparkan lebih banyak maklumat dalam ruang yang terhad, kami sering meluncurkan tetikus ke atas untuk memunculkan lapisan maklumat yang lebih berkaitan untuk meningkatkan interaktiviti. Ia boleh digunakan terutamanya dalam dinding foto syarikat, paparan maklumat pencari kerja di tapak web pengambilan, dsb.

Artikel ini menggunakan contoh untuk berkongsi dengan anda cara menggunakan jQuery untuk mencapai kesan gelongsor pada gambar untuk memaparkan maklumat. Apabila tetikus meluncur ke atas foto, maklumat pengenalan terperinci foto yang sepadan akan muncul. Sila lihat kesan demonstrasi:

Paparan kesan Muat turun kod sumber

HTML

Pertama sekali, kami menyediakan bahan halaman Halaman ini padat terdiri daripada berbilang kumpulan gambar

Pada masa yang sama, terdapat maklumat penjelasan yang berkaitan dengan gambar untuk menunjukkan kesan maklumat terperinci.

<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>

Salin selepas log masuk

CSS

Kami perlu menggunakan CSS untuk menyusun imej secara rapat dan maklumat yang sepadan dengan imej disembunyikan secara lalai.

.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;}

Salin selepas log masuk

jQuery

Kod js yang digunakan untuk memaparkan kesan telah dirangkumkan dalam album.js Sebelum memanggil, muatkan dua fail jquery.js dan album.js, dan kemudian panggil kesannya secara langsung

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

Salin selepas log masuk

Dalam album.js, jquery digunakan untuk mengawal kedudukan elemen, dan apabila tetikus meluncur ke atas, pelbagai kesan paparan kedudukan relatif ditunjukkan ke atas, bawah, kiri dan kanan Rakan yang berminat boleh menyemak kod yang berkaitan album.js.

Kandungan di atas adalah pengenalan editor untuk menggunakan jquery untuk merealisasikan pop timbul lapisan maklumat yang lebih relevan apabila tetikus digulung ke atas Muat turun kod sumber dilampirkan.