So zeigen Sie mit jQuery das entsprechende große Bild an, wenn die Maus über das kleine Bild des Produkts fährt-js-Tutorial-php.cn

So zeigen Sie mit jQuery das entsprechende große Bild an, wenn die Maus über das kleine Bild des Produkts fährt

php中世界最好的语言

Freigeben： 2018-06-01 17:43:05

Original

1932 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie jQuery bedienen, um das entsprechende große Bild anzuzeigen, wenn die Maus über das kleine Bild des Produkts fährt. Welche Vorsichtsmaßnahmen gibt es für die Bedienung von jQuery, um das entsprechende große Bild anzuzeigen? Wenn die Maus über das kleine Bild des Produkts fährt, ist das Folgende ein praktischer Fall, schauen wir uns das an.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery图片变换</title>
</head>
<style type="text/css">
 .show{width:330px; height:auto; margin:50px auto; background:#eee}
 .item{background:#fff; width:300px; height:auto; float:left; margin:15px;}
 p{ padding:15px; color:#ff6600}
 .big-photo img{ width:300px; height:300px; border:1px solid #e0e0e0}
 .des-small img{ width:30px; height:30px;border:1px solid #e0e0e0; }
 .des-small img:hover{ border:1px solid #ff6600}
 .clear{clear:both}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
  /** 更换小图片 */
  $(".item a").hover(function(){
   changeImg($(this))
  }); 
 });
 function changeImg(obj){
  if(obj.find("img").attr("alt")=="small"){
   var temp_big_src = obj.siblings('a').find('img[alt=big]').attr('src');
   var temp_big_url = obj.siblings('a[class=big-photo]').attr('href');
   var temp_small_src = obj.find('img').attr('src');
   var temp_small_url = obj.attr('href');
   obj.siblings('a').find('img[alt=big]').attr('src',temp_small_src);
  }
 }
</script>
<body>
 <p class="show">
  <p>Jquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片</p>
  <p class="item">
   <a class="big-photo">
    <img src="WR_00001.jpg" alt="big"/>
   </a>
   <a class="des-small">
    <img src="WR_00002.jpg" alt="small"/>
   </a>
   <a class="des-small">
    <img src="WR_00003.jpg" alt="small"/>
   </a>
   <a class="des-small">
    <img src="WR_00004.jpg" alt="small"/>
   </a>
  </p>
  <p class="clear"></p>
 </p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung der Konvertierungsmethoden für das Dateikodierungsformat von Node.js

So verwenden Sie den Ueditor der Vue-Anwendung Hochladen-Schaltfläche anpassen

Das obige ist der detaillierte Inhalt vonSo zeigen Sie mit jQuery das entsprechende große Bild an, wenn die Maus über das kleine Bild des Produkts fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!