Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan jQuery untuk menyerlahkan gambar semasa apabila tetikus meluncurkannya dan membuat gambar lain grey_jquery

Bagaimana untuk melaksanakan jQuery untuk menyerlahkan gambar semasa apabila tetikus meluncurkannya dan membuat gambar lain grey_jquery

WBOYasal: 2016-05-16 15:48:431530semak imbas

Contoh dalam artikel ini menerangkan cara jQuery menyedari bahawa gambar semasa diserlahkan apabila tetikus dialihkan dan gambar lain dikelabukan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Apabila tetikus meluncur ke atas gambar semasa, ia akan diserlahkan, dan gambar lain akan bertukar menjadi kelabu Kesan istimewa halaman web ini sering digunakan oleh sesetengah pusat membeli-belah seperti Taobao Apabila pengguna menggerakkan tetikus ke gambar tertentu , ia akan menjadi terang dan gambar di sekeliling akan bertukar menjadi kelabu, membentuk kontras untuk meningkatkan pengalaman pengguna
Prinsip kesan khas jquery ini ialah: luncurkan tetikus ke atas elemen semasa, cari elemen saudaranya i, dan tambahkan kelas opacity_bg padanya, alihkan tetikus keluar dari elemen semasa, pergi ke elemen saudaranya i, dan alih keluarnya dan tambahkan kelas opacity_bg

Kod teras js adalah seperti berikut:

$(document).ready(function(){
 $("ul li").hover(function(){ 
  $(this).siblings().find("i").addClass("opacity_bg");
  //鼠标滑过当前元素，找到他的同辈元素i,并为它加上opacity_bg类
 },function(){  
  $(this).siblings().find("i").removeClass("opacity_bg");
  //鼠标移出当前元素，到他的同辈元素i,并移除它加上opacity_bg类景
 })
})

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $("ul li").hover(function(){    
     $(this).siblings().find("i").addClass("opacity_bg");//鼠标滑过当前元素，找到他的同辈元素i,并为它加上opacity_bg类
    },function(){     
     $(this).siblings().find("i").removeClass("opacity_bg");//鼠标移出当前元素，到他的同辈元素i,并移除它加上opacity_bg类景
    })
  })
</script>
<style type="text/css">
 ul{margin:0 auto;padding:0;width:810px;font-size:0;zoom:1;}
 ul:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
 ul li{list-style-type:none;float:left;width:190px;height:200px;margin-right:1px;margin-bottom:1px;text-align:center;display:table;position:relative;}
 ul li a{display:table-cell;vertical-align:middle;*display: block;*font-size: 175p;*font-family:Arial;text-align:center;}
 img{border:none; vertical-align:middle;width:190px;height:200px;}
 i{display:block;width:100%;height:100%;position:absolute;left:0;top:0;}
 .opacity_bg{background:#000;opacity:0.4;}
 h1,h4{margin:10px auto;width:810px;color:#FF0C8A;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
</style>
</head>
<body>
 <h1>jquery聚光灯效果----无效果请刷新</h1>
 <h4>鼠标滑向当前图片高亮显示，其它图片变灰</h4>
 <ul>
  <li><a><img src="images/120913/1-120913133035250.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120829/1-120R9101014R2.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120830/1-120S01F5505H.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120913/1-120913133035250.jpg" /></a><i class="this_bg"></i></li>
 </ul>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pelaksanaan objek tatasusunan JavaScript menambah kaedah untuk mengembalikan kemahiran elemen_javascript rawakArtikel seterusnya：Pelaksanaan objek tatasusunan JavaScript menambah kaedah untuk mengembalikan kemahiran elemen_javascript rawak

Artikel berkaitan

Lihat lagi