suchen

Heim >Web-Frontend >js-Tutorial >So zeigen Sie mit jQuery das entsprechende große Bild an, wenn die Maus über das kleine Bild des Produkts fährt

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

php中世界最好的语言
php中世界最好的语言Original
2018-06-01 17:43:051996Durchsuche

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>

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!

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：Zusammenfassung der Konvertierungsmethoden für das Dateikodierungsformat von Node.jsNächster Artikel：Zusammenfassung der Konvertierungsmethoden für das Dateikodierungsformat von Node.js

In Verbindung stehende Artikel

Mehr sehen