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

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

WBOY

Lepaskan： 2016-05-16 15:48:43

asal

1592 orang telah melayarinya

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类景
 })
})

Salin selepas log masuk

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>

Salin selepas log masuk

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