Effet de loupe d'image de produit imitation Taobao basé sur jQuery

Effet de loupe d'image de produit imitation Taobao basé sur jQuery_jquery

WBOY

Libérer： 2016-05-16 15:19:02

original

1599 Les gens l'ont consulté

Lors du développement d'une ville, la fonction d'agrandissement de l'image est souvent utilisée. Voici un résumé des effets de loupe que j'ai utilisés dans des projets récents (pas un plug-in).

Effet loupe Composants js couramment utilisés jquery.imagezoom, jquery.jqzoom, jquery.zoom, etc. Ces composants sont similaires. Si vous êtes intéressé, vous pouvez vous rendre à Baidu.

Cet article utilise principalement des méthodes sans composants pour créer un effet de loupe.

Chaque image doit être générée en trois tailles, sinon l'effet de la loupe ne sera pas trop évident. Ici c'est 54X54 320X320 800X800.

Regardez d'abord l'effet : lorsque la souris passe sur la petite image, la grande image change en conséquence.

Le premier est html

<div class="infoimg">
  <div class="mainImg" id="largePicDiv">
    <img id="largePic" src="FileUpload/20160120/20160120103334758_w.jpg" alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery" />
    <div class="zoom_pup" id="move"></div>
    <div id="detailPic" class="big_pic">
      <img alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery" src="FileUpload/20160120/20160120103334758_b.jpg" />
    </div>
  </div>
  <div class="allImg">
      <img src="FileUpload/20160120/20160120103334758_x.jpg" alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103334918_x.jpg" alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335031_x.jpg" alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335127_x.jpg" alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335209_x.jpg" alt="Effet de loupe dimage de produit imitation Taobao basé sur jQuery_jquery"/>

  </div>
        
</div>

Copier après la connexion

Ici, le div avec l'identifiant de move est la poignée de la loupe. Le div avec l'identifiant de detailPic est la loupe sur le côté droit

css

.infoimg { float: left; padding: 0 20px 30px 0; position: relative; width: 320px; }

.infoimg img { display: block; height: 320px; width: 320px; }

.allImg { height: 58px; margin: 15px 0 0 10px; overflow: hidden; width: 310px; }

.allImg img { cursor: pointer; float: left; height: 54px; margin-right: 3px; padding: 2px; width: 54px; }

.allImg img.current { border: 1px solid #f1f1f1; padding: 1px; }

.mainImg { position: relative; }

.mainImg .zoom_pup { background: url("../images/zoom_pup.png") repeat 0 0; cursor: move; height: 175px; left: 0px; position: absolute; top: 160px; width: 175px; display: none; }

.big_pic { background-color:#fff; border: 1px solid #f5f5f5; height: 400px; left: 320px; overflow: hidden; position: absolute; text-align: center; top: 0; width: 400px; display: none; }
.big_pic img{ width: 800px; height: 800px;}

Copier après la connexion

Code JS

//切换图片
  $(".allImg img").mouseover(function() {
    $(".allImg img").removeClass("current");
    $(this).addClass("current");
    var src = $(this).attr("src");
    $("#largePic").attr("src", src.replace("_x", "_w"));
    $("#detailPic img").attr("src", src.replace("_x", "_b"));

  });
  
  //放大镜效果
  $("#largePicDiv").bind("mousemove",
    function(e) {
      var ev = e || event;
      var mouseX = ev.pageX;
      var mouseY = ev.pageY;
      var picLeft = $("#largePic").offset().left;
      var picTop = $("#largePic").offset().top;
      var picWidth = $("#largePic").width();
      var picHeight = $("#largePic").height();
      var xLength = mouseX - picLeft;
      var yLength = mouseY - picTop;
      var qWidth = picWidth / 4;
      var lastQWidth = picWidth - picWidth / 4;
      var qHeight = picHeight / 4;
      var lastQHeight = picHeight - picHeight / 4;
      if (xLength < qWidth) {
        $("#move").css("left","0px");
      } else {
        if (xLength > lastQWidth) {
          $("#move").css("left", (lastQWidth - qWidth) + "px");
        } else {
          $("#move").css("left", (xLength - qWidth) + "px");
        }
      }
      if (yLength < qHeight) {
        $("#move").css("top", "0px");
      } else {
        if (yLength > lastQHeight) {
          $("#move").css("top", (lastQHeight - qHeight) + "px");
        } else {
          $("#move").css("top", (yLength - qHeight) + "px");
        }
      }
      $("#detailPic > img").css("left", parseInt($("#move").css("left")) * (-800 / picWidth) + "px").css("top", parseInt($("#move").css("top")) * (-800 / picWidth) + "px").css("position", "absolute");
    });

Copier après la connexion

Bien sûr, la rangée inférieure de petites images n'a toujours pas de fonction, à savoir que lorsque les images sont plus grandes que 5, les images peuvent défiler vers la gauche et la droite, de sorte que les images de plus de 5 puissent être hébergées. Les images utilisées dans le projet ici sont généralement inférieures à 5, donc cette fonction n'existe pas. Vous pouvez vous référer à Dangdang ou JD.com.

Ce qui précède est le code jQuery pour obtenir l'effet de loupe d'image. J'espère qu'il sera utile à l'apprentissage de chacun.