목차
jquery 모방 Jingdong 제품 페이지
Jingdong 페이지는 다들 익히 알고 계시죠? 제품 페이지에 들어가서 옆 이미지에 마우스를 올리면 확대 효과가 나타나는데, 그 다음은 어떻게 하는지 보여드릴게요! ! ! !
JD 상품페이지 효과를 따라해보세요! ! !
JD 상품페이지 CSS코드 흉내내기! ! !
JD 상품페이지의 html코드를 따라해보세요! ! !
JD 상품페이지의 jquery 코드를 흉내내보세요! ! !
어때요, 만들자마자 너무 상쾌했어요! ! ! ! !
웹 프론트엔드 JS 튜토리얼 jquery 모방 Jingdong 제품 페이지 코드 공유

jquery 모방 Jingdong 제품 페이지 코드 공유

Jun 26, 2017 pm 02:28 PM
jquery 징둥 상품 페이지

jquery 모방 Jingdong 제품 페이지

Jingdong 페이지는 다들 익히 알고 계시죠? 제품 페이지에 들어가서 옆 이미지에 마우스를 올리면 확대 효과가 나타나는데, 그 다음은 어떻게 하는지 보여드릴게요! ! ! !
JD 상품페이지 효과를 따라해보세요! ! !

jquery 모방 Jingdong 제품 페이지 코드 공유

JD 상품페이지 CSS코드 흉내내기! ! !
로그인 후 복사
로그인 후 복사
* {
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;
}
로그인 후 복사
JD 상품페이지의 html코드를 따라해보세요! ! !
로그인 후 복사
로그인 후 복사
<html>
 <head></head>
 <body>
  <div>
   <div class="da ">
    <div class="shang">
     <img src="img/b1.jpg" height="350" width="350" id="pian" />
     <div class="yin"></div>
    </div>
    <div class="bao">
     <span class="zuo"></span>
     <div 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>
     </div>
     <span class="you"></span>
    </div>
    <div class="lie ">
     <ul>
      <li class="ll">图文介绍</li>
      <li>评论(1)</li>
     </ul>
    </div>
    <div class="nie">
     <div class="bao1">
      <div class="up">
       <span>暂无好评!</span>
       <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</p>
       <p>来源:师徒课堂</p>
      </div>
      <div class="down">
       <img src="img/11.png" height="300" width="1329" />
      </div>
     </div>
    </div>
   </div>
   <div class="xia">
    <img src="img/b1.jpg" height="600" width="600" id="zhao" />
   </div>
  </div> 
 </body>
</html>
로그인 후 복사
JD 상품페이지의 jquery 코드를 흉내내보세요! ! !
$(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>div").eq(index).show().siblings().hide();
    });
});
로그인 후 복사

어때요, 만들자마자 너무 상쾌했어요! ! ! ! !

위 내용은 jquery 모방 Jingdong 제품 페이지 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

징동닷컴(JD.com)은 '무료 방문 반품 및 교환' 화물 보험 서비스를 더욱 업그레이드해 8월 말까지 전면 출시될 예정이다. 징동닷컴(JD.com)은 '무료 방문 반품 및 교환' 화물 보험 서비스를 더욱 업그레이드해 8월 말까지 전면 출시될 예정이다. Aug 14, 2024 am 10:09 AM

징동닷컴(JD.com)은 '무료 방문 반품 및 교환' 화물 보험 서비스를 더욱 업그레이드해 8월 말까지 전면 출시될 예정이다.

Laravel 페이지에서 CSS를 올바르게 표시할 수 없는 문제를 해결하는 방법 Laravel 페이지에서 CSS를 올바르게 표시할 수 없는 문제를 해결하는 방법 Mar 10, 2024 am 11:33 AM

Laravel 페이지에서 CSS를 올바르게 표시할 수 없는 문제를 해결하는 방법

'JD.com'에서 특급 물류를 확인하는 방법 'JD.com'에서 특급 물류를 확인하는 방법 Mar 11, 2024 pm 01:52 PM

'JD.com'에서 특급 물류를 확인하는 방법

3초 안에 페이지 점프를 구현하는 방법: PHP 프로그래밍 가이드 3초 안에 페이지 점프를 구현하는 방법: PHP 프로그래밍 가이드 Mar 25, 2024 am 10:42 AM

3초 안에 페이지 점프를 구현하는 방법: PHP 프로그래밍 가이드

BOE와 JD.com이 전략적 협력 계약을 체결했습니다. BOE와 JD.com이 전략적 협력 계약을 체결했습니다. Mar 01, 2024 pm 10:55 PM

BOE와 JD.com이 전략적 협력 계약을 체결했습니다.

Dewu 제품의 정품 여부를 확인하는 방법 정품 여부를 확인하는 방법은 무엇입니까? Dewu 제품의 정품 여부를 확인하는 방법 정품 여부를 확인하는 방법은 무엇입니까? Mar 12, 2024 pm 12:16 PM

Dewu 제품의 정품 여부를 확인하는 방법 정품 여부를 확인하는 방법은 무엇입니까?

Word에서 콘텐츠 페이지를 삭제하는 방법 소개 Word에서 콘텐츠 페이지를 삭제하는 방법 소개 Mar 26, 2024 am 10:06 AM

Word에서 콘텐츠 페이지를 삭제하는 방법 소개

JD.com에서 친구에게 결제를 요청하는 방법 친구에게 대신 결제를 요청하는 JD.com 튜토리얼 JD.com에서 친구에게 결제를 요청하는 방법 친구에게 대신 결제를 요청하는 JD.com 튜토리얼 Mar 13, 2024 pm 02:19 PM

JD.com에서 친구에게 결제를 요청하는 방법 친구에게 대신 결제를 요청하는 JD.com 튜토리얼

See all articles