jquery imitation Jingdong products enlarge browsing page_example sharing

We have shared many articles about imitating JD functions with you before. In this article, we mainly introduce to you in detail the jquery imitation JD product browsing page. Place the mouse on the picture to achieve a magnification effect. It has certain reference value. Interested friends You can refer to it, I hope it can help everyone.

jquery imitation Jingdong product page

Everyone is familiar with the Jingdong page. When you enter the product page and place the mouse on the picture next to it, a magnifying effect will appear. Next, I will show you Let’s see how it’s done! ! ! !

Imitate the css code of Jingdong product page! ! !

*{
  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;
}

Imitate the html code of JD product page! ! !

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

Imitate jquery code for JD product page! ! !

$(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();
  });
});

The effect of imitation Jingdong product page! ! !

What do you think? Isn’t it interesting? Come and try it now.

Related recommendations:

Example of imitating Jingdong Express scrolling up_javascript skills

Use vue.js to imitate Jingdong Province Selection components for three-level linkage in urban areas

Html+Css Simple and fast imitation of Jingdong product classification navigation for newbies_html/css_WEB-ITnose

The above is the detailed content of jquery imitation Jingdong products enlarge browsing page_example sharing. For more information, please follow other related articles on the PHP Chinese website!