suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie jQuery, um das aktuelle Bild hervorzuheben, wenn die Maus darüber gleitet, und andere Bilder zu grey_jquery zu machen

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

WBOY
WBOYOriginal
2016-05-16 15:48:431583Durchsuche

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

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die Implementierung eines JavaScript-Array-Objekts fügt eine Methode hinzu, um zufällige Elemente_Javascript-Fähigkeiten zurückzugebenNächster Artikel：Die Implementierung eines JavaScript-Array-Objekts fügt eine Methode hinzu, um zufällige Elemente_Javascript-Fähigkeiten zurückzugeben

In Verbindung stehende Artikel

Mehr sehen