jquery 모방 Jingdong 제품 페이지 코드 공유
Jun 26, 2017 pm 02:28 PM
jquery
징둥
상품
페이지
jquery 모방 Jingdong 제품 페이지
Jingdong 페이지는 다들 익히 알고 계시죠? 제품 페이지에 들어가서 옆 이미지에 마우스를 올리면 확대 효과가 나타나는데, 그 다음은 어떻게 하는지 보여드릴게요! ! ! !
JD 상품페이지 효과를 따라해보세요! ! !
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으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7299
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1206
29



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

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

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

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