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.-js tutoriel-php.cn

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中世界最好的语言

Libérer： 2018-05-15 10:55:12

original

2367 Les gens l'ont consulté

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>

Copier après la connexion

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!