recherche

Maison  >  Article  >  interface Web  >  jQuery implémente la fonction d'affichage de la fonction d'aperçu de la page du produit en grande image correspondante lorsque la souris glisse sur la petite image du produit.

jQuery implémente la fonction d'affichage de la fonction d'aperçu de la page du produit en grande image correspondante lorsque la souris glisse sur la petite image du produit.

php中世界最好的语言
php中世界最好的语言original
2018-05-15 10:55:122368parcourir

Cette fois, nous vous proposons jQuery pour réaliser la fonction d'affichage de l'aperçu de la grande image du produit correspondant lorsque la souris glisse sur la petite image du produit Notes Qu'est-ce que c'est ? Voici des cas réels. Jetons un coup d'oeil.

1. Capture d'écran de l'effet

2. it Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention à d'autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée : 
<!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>

L'analyse des étapes pour utiliser le composant PopupWindow avec Vue

vue+jquery+lodash est suspendu et fixé en haut lors du coulissement Explication détaillée de la mise en œuvre de la fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes de conversion du format d'encodage de fichier Node.jsArticle suivant：Explication détaillée des étapes de conversion du format d'encodage de fichier Node.js

Articles Liés

Voir plus