Home >Web Front-end >JS Tutorial >jQuery implements the function of displaying the corresponding large picture product page preview function when the mouse slides over the small picture of the product.

jQuery implements the function of displaying the corresponding large picture product page preview function when the mouse slides over the small picture of the product.

php中世界最好的语言Original: 2018-05-15 10:55:122406browse

This time we will bring you jQuery to implement the function of displaying the preview of the corresponding large picture product page when the mouse slides over the small picture of the product. Notes What are they? The following is a practical case. Let’s take a look.

1. Screenshot of the effect

##2. Code

<!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>

I believe I saw it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

jQuery implements the function of displaying the corresponding large picture product page preview function when the mouse slides over the small picture of the product.

Related articles