So implementieren Sie jQuery, um das aktuelle Bild hervorzuheben, wenn die Maus darüber gleitet, und andere Bilder zu grey

So implementieren Sie jQuery, um das aktuelle Bild hervorzuheben, wenn die Maus darüber gleitet, und andere Bilder zu grey_jquery zu machen

WBOY

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

Original

1592 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery erkennt, dass das aktuelle Bild hervorgehoben wird, wenn die Maus bewegt wird, und andere Bilder ausgegraut sind. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wenn die Maus über das aktuelle Bild fährt, wird es hervorgehoben und andere Bilder werden grau. Dieser Webseiten-Spezialeffekt wird häufig von einigen Einkaufszentren wie Taobao verwendet, wenn der Benutzer die Maus über ein bestimmtes Bild bewegt , es wird heller und die umliegenden Bilder werden grau und bilden einen Kontrast, um das Benutzererlebnis zu verbessern
Das Prinzip dieses jquery-Spezialeffekts ist: Bewegen Sie die Maus über das aktuelle Element, suchen Sie sein Geschwisterelement i und fügen Sie ihm die Klasse opacity_bg hinzu, bewegen Sie die Maus aus dem aktuellen Element heraus, gehen Sie zu seinem Geschwisterelement i und entfernen Sie es und fügen Sie die Klasse opacity_bg

hinzu

Der Kern-JS-Code lautet wie folgt:

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

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.