jquery 모방 Jingdong 제품 페이지 코드 공유-JS 튜토리얼-php.cn

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

로그인 후 복사

JD 상품페이지의 html코드를 따라해보세요! ! !

로그인 후 복사
로그인 후 복사

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

로그인 후 복사

JD 상품페이지의 jquery 코드를 흉내내보세요! ! !

$(function() {
    var $yin = $(&quot;.yin&quot;);
    $(&quot;.Ul li img&quot;).mouseover(function() {
        $(this).parent().addClass(&quot;li&quot;).siblings().removeClass(&quot;li&quot;);
        $(&quot;#pian&quot;).attr(&quot;src&quot;, $(this).attr(&quot;src&quot;));
        $(&quot;#zhao&quot;).attr(&quot;src&quot;, $(this).attr(&quot;src&quot;));
    }).mouseout(function() {
        $(this).parent().removeClass(&quot;li&quot;);
    });
    var l = $(&quot;.shang&quot;).eq(0).offset().left;
    var t = $(&quot;.shang&quot;).eq(0).offset().top;
    var width1 = $(&quot;.yin&quot;).outerWidth() / 2;
    var height1 = $(&quot;.yin&quot;).outerHeight() / 2;
    var maxL = $(&quot;.shang&quot;).width() - $yin.outerWidth();
    var maxT = $(&quot;.shang&quot;).height() - $yin.outerHeight();
    var bili = $(&quot;#zhao&quot;).width() / $(&quot;#pian&quot;).width();
    $(&quot;.shang&quot;).mousemove(function(e) {
        var maskL = e.clientX - l - width1,
        maskT = e.clientY - t - height1;
        if (maskL &lt; 0) {
            maskL = 0
        };
        if (maskT &lt; 0) {
            maskT = 0
        };
        if (maskL &gt; maxL) {
            maskL = maxL
        };
        if (maskT &gt; maxT) {
            maskT = maxT
        };
        $yin.css({
            &quot;left&quot;: maskL,
            &quot;top&quot;: maskT
        });
        $(&quot;.xia&quot;).show();
        $(&quot;.yin&quot;).show();
        $(&quot;#zhao&quot;).css({
            &quot;margin-left&quot;: -maskL * bili,
            &quot;margin-top&quot;: -maskT * bili
        });
    });
    $(&quot;.shang&quot;).mouseleave(function() {
        $(&quot;.xia&quot;).hide();
        $(&quot;.yin&quot;).hide();
    });
    var marginLeft = 0;
    $(&quot;.you&quot;).click(function() {
        marginLeft = marginLeft - 64;
        if (marginLeft &lt; -192) {
            marginLeft = -192
        };
        $(&quot;.tab ul&quot;).stop().animate({
            &quot;margin-left&quot;: marginLeft
        },
        &quot;fast&quot;);
    });
    $(&quot;.zuo&quot;).click(function() {
        marginLeft = marginLeft + 64;
        if (marginLeft &gt; 0) {
            marginLeft = 0
        };
        $(&quot;.tab ul&quot;).stop().animate({
            &quot;margin-left&quot;: marginLeft
        },
        &quot;fast&quot;);
    });
    $(&quot;.lie li&quot;).click(function() {
        var index = $(this).index();
        $(this).addClass(&quot;ll&quot;).siblings().removeClass(&quot;ll&quot;);
        $(&quot;.bao1&gt;div&quot;).eq(index).show().siblings().hide();
    });
});

로그인 후 복사