jquery imitation produits Jingdong agrandir la page de navigation_exemple de partage

Nous avons déjà partagé avec vous de nombreux articles sur l'imitation des fonctions de JD.com. Dans cet article, nous vous présentons principalement en détail la page de navigation des produits jquery imitant JD.com. Placez la souris sur l'image pour obtenir un effet de grossissement. . Il a une certaine valeur de référence. Amis intéressés Vous pouvez vous y référer, j'espère que cela pourra aider tout le monde.

Page produit jquery imitation Jingdong

Tout le monde connaît la page Jingdong Lorsque vous entrez dans la page produit et placez la souris sur l'image, un effet de grossissement apparaîtra ensuite. Je vais vous montrer. Voyons comment c'est fait ! ! ! !

Imitez le code CSS de la page produit JD ! ! !

*{
  margin: 0;
  padding: 0;
}
.da{
  width: 360px;
  height: 418px;
  float: left;
}
.shang{
  width: 350px;
  height: 350px;
  border: 1px solid #ccc;
  margin: 10px 0 10px 10px;
  position: relative;
}
.yin{
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.3);
  position: absolute;
  top:0;
  left: 0;
  cursor: pointer;
  display: none;
}
.bao{
  width: 362px;
  height: 56px;
}
.tab{
  width: 320px;
  height: 56px;
  margin-left: 10px;
  overflow: hidden;
}
.Ul{
  width: 9999px;
  height: 56px;
}
.Ul li{
  width: 52px;
  height: 52px;
  float: left;
  border: 2px solid #ccc;
  margin-left: 8px;
  list-style: none;
  position:relative;
  text-align:center;
}
.li{
  width: 52px;
  height: 52px;
  border: 2px solid #FF7403;
}
.li img{
  display: block;
  position: absolute;
  top:50%;
  left: 50%;
  margin-top:-26px;
  margin-left:-26px;
}
.zuo{
  display: block;
  width: 12px;
  height: 56px;
  background: url(../img/icon_clubs.gif) no-repeat;
  background-size: 180px 608px;
  background-position: -82px -462px;
  float: left;
  margin-left: 10px;
}
.you{
  display: block;
  width: 12px;
  height: 56px;
  background: url(../img/icon_clubs.gif) no-repeat;
  background-size: 180px 608px;
  background-position: -95px -462px;
  float: right;
  margin-top: -56px;
}
.xia{
  width: 360px;
  height: 418px;
  border: 1px solid #ccc;
  float: left;
  margin: 10px 0 0px 20px;
  overflow: hidden;
  display: none;
}

.lie{
  width: 1329px;
  height: 30px;
  margin-left: 10px;
  margin-top: 20px;
  border-bottom: 2px solid #BE0000;
}
.lie li{
  float: left;
  list-style: none;
  width: 80px;
  height: 28px;
  background: #fff;
  border-radius: 3px;
  border: 0;
  line-height: 30px;
  text-align: center;
  margin-right: 5px;
  border:1px solid #BE0000;
  color: #c30;
  cursor: pointer;
  font-weight: bold;
}
.lie>ul .ll{
  width: 80px;
  height: 30px;
  background: #BE0000;
  border-radius: 3px;
  border: 0;
  line-height: 30px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.nie{
  width: 1329px;
  height: 200px;
  margin-left: 10px;
  overflow: hidden;
}
.bao1{
  width: 1329px;
  height: 500px;
}
.up{
  width: 1329px;
  height: 200px; 
}
.up span{
  display: block;
  padding:10px 0 0 10px;
  margin-bottom: 70px;
}
.up p{
  text-align: center;
  margin-top: 5px;
}
.down{
  width: 1329px;
  height: 300px; 
  background: yellow;
}

Imitez le code html de la page produit JD ! ! !

<p>
  <p class="da ">
  <p class="shang">
    <img src="img/b1.jpg" height="350" width="350" id="pian">
    <p class="yin"></p>
  </p>
  <p class="bao">
    <span class="zuo"></span>
  
    <p class="tab">
      <ul class="Ul">
        <li>
          <img src="img/b1.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b2.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b3.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b1.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b2.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b3.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b1.jpg" height="52" width="52" />
        </li>
        <li>
          <img src="img/b2.jpg" height="52" width="52" />
        </li>
      </ul>
    </p>
      <span class="you"></span>
    </p>
    <p class="lie ">
      <ul>
        <li class="ll">图文介绍</li>
        <li>评论（1）</li>
      </ul>
    </p>
  
    <p class="nie">
      <p class="bao1">
        <p class="up">
          <span>暂无好评！</span>
          <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</p>
          <p>来源：师徒课堂</p>
        </p>
        <p class="down">
          <img src="img/11.png" height="300" width="1329" />
        </p>
      </p>
    </p>
  </p>
  <p class="xia">
    <img src="img/b1.jpg" height="600" width="600" id="zhao" />
  </p>
</p>

Imitez le code jquery de la page produit JD ! ! !

$(function(){
  var $yin = $(".yin");
  $(".Ul li img").mouseover(function(){
    $(this).parent().addClass("li").siblings().removeClass("li");
    $("#pian").attr("src",$(this).attr("src"));
    $("#zhao").attr("src",$(this).attr("src"));
  }).mouseout(function(){
    $(this).parent().removeClass("li");
  });

  var l = $(".shang").eq(0).offset().left;
  var t = $(".shang").eq(0).offset().top;
  var width1 = $(".yin").outerWidth()/2;
  var height1 = $(".yin").outerHeight()/2;
  var maxL = $(".shang").width() - $yin.outerWidth();
  var maxT = $(".shang").height() - $yin.outerHeight();
  var bili = $("#zhao").width()/$("#pian").width();

  $(".shang").mousemove(function(e){
    var maskL = e.clientX - l - width1,maskT = e.clientY - t - height1;
    if (maskL < 0) { maskL = 0};
    if (maskT < 0) { maskT = 0};
    if (maskL > maxL) {maskL = maxL};
    if (maskT > maxT) {maskT = maxT};

    $yin.css({"left":maskL,"top":maskT});
    $(".xia").show();
    $(".yin").show();
    $("#zhao").css({"margin-left":-maskL*bili,"margin-top":-maskT*bili});


  });
  $(".shang").mouseleave(function(){
    $(".xia").hide();
    $(".yin").hide();
  });

  var marginLeft = 0;
  $(".you").click(function(){
    marginLeft = marginLeft - 64;
    if (marginLeft < -192) {marginLeft = -192};
    $(".tab ul").stop().animate({"margin-left":marginLeft},"fast");
  });

  $(".zuo").click(function(){
    marginLeft = marginLeft + 64;
    if (marginLeft > 0) {marginLeft = 0};
    $(".tab ul").stop().animate({"margin-left":marginLeft},"fast");
  });

  $(".lie li").click(function(){
    var index=$(this).index();
    $(this).addClass("ll").siblings().removeClass("ll");
     $(".bao1>p").eq(index).show().siblings().hide();
  });
});

Imitez l'effet de la page produit JD.com ! ! !

Qu'en pensez-vous ? N'est-ce pas intéressant ? Venez l'essayer maintenant.

Recommandations associées :

Exemple d'imitation des compétences de défilement up_javascript de Jingdong Express

Utilisation de vue.js pour imiter la sélection de la province de Jingdong composants pour une liaison à trois niveaux dans les zones urbaines

Html+Css imitation simple et rapide de la navigation de classification des produits de Jingdong pour les débutants_html/css_WEB-ITnose

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!