代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shop</title>
<link rel="stylesheet" href="src/css/base.css">
<style>
.spinnerExample{margin:10px 0;}
.boxta{
width: 1210px;
height: 680px;
margin: 0 auto;
}
#box{
width:360px;
height:460px;
/*border:1px solid #ccc;*/
padding:10px;
position:relative;
float: left;
}
#box #middleImg{
width:350px;
height:350px;
border:1px solid #ccc;
padding:5px;
position:relative;
margin-bottom: 10px;
}
#box #middleImg img{
width: 100%;
height: 100%;
}
#box #middleArea{
width:100px;
height:100px;
background:rgba(100, 222, 200, 0.5);
position:absolute;
left:0;
top:0;
display:none;
}
#box #small{
/*background: red;*/
width:360px;
height:50px;
margin-left: 15px;
}
#box #small li {
width:60px;
height:60px;
}
#box #small li img{
width: 100%;
height: 100%;
}
#box #small li{
float:left;
border:1px solid #ccc;
margin-right: 3px;
cursor:pointer;
}
#box #bigArea{
position:absolute;
left:420px;
top:50px;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #ccc;
display:none;
z-index: 1000;
}
#box #bigArea img{
position:absolute;
left:0;
top:0;
width:800px;
height:800px;
}
.right{
padding-top: 5px;
float: left;
margin-left: 100px;
font-size: 18px;
line-height: 24px;
}
.right .inner1{
border-bottom: #ccc dotted 1px;
width:600px;
height: 75px;
margin-bottom: 10px;
}
.right .inner1>p:nth-of-type(1) a{
color: #ccc;
}
.right .inner1>p:nth-of-type(3) a{
color: #ccc;
font-size: 14px;
}
.inner2{
border-bottom: #ccc dotted 1px;
margin-bottom: 15px;
line-height: 50px;
}
.inner2 s{
color: #ccc;
font-size: 14px;
}
.inner2 span{
color: #c69c6d;
font-size: 28px;
}
.inner2 b{
display: inline-block;
text-align: center;
width: 80px;
height: 20px;
line-height: 20px;
font-size: 14px;
color: #fff;
background: #c8a985;
border-radius: 10px;
}
.inner2 i{
padding-top: 5px;
display:inline-block;
width: 27px;
height:26px;
background:url("src/images/i.jpg") no-repeat;
margin-left: 60px;
}
.inner2 .a{
display: inline-block;
height: 26px;
width: 200px;
position: relative;
}
.inner2 .a a{
position: absolute;
top:0px;
font-size: 14px;
color: #696967;
}
.inner2 .a img{
position: absolute;
left: -32px;
top:30px;
display: none;
}
.inner2 .a:hover img{
display: block;
}
.inner3{
font-size: 12px;
margin-bottom: 20px;
}
.inner3 p:nth-of-type(1){
margin-bottom: 20px;
}
.inner3 i{
margin-left: 50px;
display: inline-block;
width: 35px;
height: 35px;
padding: 3px;
border: red solid 1px;
}
.inner4{
font-size: 12px;
color: #ccc;
line-height: 28px;
}
.inner4 p:nth-last-of-type(1) {
margin-bottom: 20px;
}
.inner4 p>a{
color: #c69c6d;
}
.inner4 .btn1{
float: left;
width: 120px;
height: 35px;
line-height: 35px;
text-align: center;
border: #c69c6d solid 1px;
font-size: 14px;
color: #c69c6d;
}
.inner4 .btn2{
margin-left: 10px;
float: left;
width: 150px;
height: 35px;
background-color: #c69c6d;
color: #fff;
line-height: 35px;
position: relative;
}
.inner4 .btn2 span{
display: inline-block;
width: 25px;
height: 25px;
background: url("src/images/lux_index.png")no-repeat -68px -50px;
padding: 3px;
position: absolute;
left:25px;
top:5px;
}
.inner4 .btn2 i{
font-size: 14px;
line-height: 35px;
position: absolute;
top: 0;
left: 50px;
}
.inner4 .btn2,.inner4 .btn1{
cursor: pointer;
}
</style>
<script src="src/js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="top">
<p><a href="#"><img src="src/images/top.jpg" alt=""></a></p>
</div>
<div class="top-nav">
<div class="top-inner">
<div class="left">
<span class="icon-home"></span><a href="#">第五大道首页</a>|
</div>
<div class="left2">
<span class="icon-phone"></span><i>贵宾专线：4008-6767-38</i>
<a href="#">登录 <b>|</b></a>
</div>
<div class="register">
<img src="src/images/youli.gif"/><a href="register.html">注册 <i>|</i></a>
</div>
<div class="nav">
<div class="nav-content">
<a href="#">我的第五大道</a>
<ul>
<li><a href="#">我的订单</a></li>
<li><a href="#"> 我的收藏</a></li>
<li><a href="#">已购商品</a></li>
<li><a href="#">我的礼券</a></li>
<li><a href="#">我的积分</a></li>
</ul>
<div class="nav-logo"></div>
</div>
</div>
<div class="help">
<a href="#">帮助中心</a>
</div>
<div class="xz">
<a href="#">手机版下载 <span class="icon-arrow-outline-down"></span></a>
<!--<img src="images/qr.jpg" alt="">-->
</div>
</div>
</div>
<div class="header">
<div class="logo">
<a href="#"><img src="src/images/logo.jpg"></a>
</div>
<div class="yijian">
<a href="#"><img src="src/images/yijian.jpg"></a>
</div>
<div class="search">
<input placeholder="太阳镜" type="text">
<button>搜索</button>
<a href="#">连衣裙</a>
<a href="#">美妆</a>
<a href="#">运动户外</a>
<a href="#">箱包</a>
<a href="#">配饰</a>
<a href="#">腕表</a>
</div>
<div class="haiwai">
<i> <span class="icon-globe"></span>
<h2>第五大道海外生活</h2></i>
<img src="src/images/cart.png" alt="">
</div>
</div>
<div class="nav-menu">
<div class="menu">
<ul>
<li class="current"><a href="#">商品分类</a></li>
<li><a href="#">品牌</a></li>
<li><a href="#">最新</a></li>
<li><a href="#">女士</a></li>
<li><a href="#">男士</a></li>
<li><a href="#">生活馆</a></li>
<li><a href="#">海外馆</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">特惠</a></li>
<li><a href="#">礼品区</a></li>
<li><a href="#"><span class="icon-location"></span>到店</a></li>
<li><a href="#"><img src="src/images/overseaslogo.gif" alt=""></a></li>
<li><a href="#"><img src="src/images/ri.jpg" alt=""></a></li>
</ul>
</div>
</div>
<div class="boxta">
<div id="box">
<div id="middleImg">
<img src="src/images/ams.jpg"/>
<div id="middleArea"></div>
</div>
<div id="small">
<ul>
<li><img src="src/images/ams1.jpg" alt=""></li>
<li><img src="src/images/ams2.jpg" alt=""></li>
<li><img src="src/images/ams3.jpg" alt=""></li>
<li><img src="src/images/ams4.jpg" alt=""></li>
<li><img src="src/images/ams5.jpg" alt=""></li>
</ul>
</div>
<div id="bigArea">
<img id="bigImg" src="src/images/ams.jpg"/>
</div>
</div>
<div class="right">
<div class="inner1">
<p>
<a>Hermes爱马仕</a>
</p>
<p><a>经典红色H羊毛毯</a></p>
<p><a>货号: 5Lux1695812g_p5811751</a></p>
</div>
<div class="inner2">
<span>￥ 8500</span> <s>￥ 11050</s> <b>红卡会员价</b><i></i>
<div class="a">
<a>扫码下载手机客户端 </a>
<img src="src/images/qr.jpg" alt="">
</div>
</div>
<div class="inner3">
<p><span>颜色</span><i>红色</i></p>
<p><span>数量</span></p>
</div>
<div class="inner4">
<p>发货门店此货品将由 <a>第五大道奢侈品网</a> 为您发货。</p>
<p>发货时效预计15-25个工作日发货，延迟发货慢必赔！查看详情 》</p>
<p>温馨提示本商品 有质量问题支持7天退换货</p>
<p>包邮政策白金钻石顺丰包邮，注册用户满99元免邮</p>
<p>发票政策海外商品暂不支持发票</p>
<div class="btn1">立即购买</div>
<div class="btn2"><span></span><i>加入购物袋</i></div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
<script>
function getStyle(el, attr){
if(el.currentStyle){
return el.currentStyle[attr];
}
return window.getComputedStyle(el, null)[attr];
}
window.onload = function(){
//核心公式 小区域/大区域=小图/大图
// 小区域= (小图/大图) *大区域;
//求出比例 小图/小区域=大图/大区域
var oBox = document.querySelector('#box');
//小区域
var middleArea = document.getElementById('middleArea');
//小图
var middleImg = document.getElementById('middleImg');
//大区域
var bigArea = document.getElementById('bigArea');
//大图
var bigImg = document.getElementById('bigImg');//大图
// 小区域 =(小图/大图)*大区域
middleArea.style.width = (parseInt(getStyle(middleImg, "width")) / parseInt(getStyle(bigImg, "width"))) * parseInt(getStyle(bigArea, "width")) + "px";
middleArea.style.height = (parseInt(getStyle(middleImg, "height")) / parseInt(getStyle(bigImg, "height"))) * parseInt(getStyle(bigArea, "height")) + "px";
//如果当前 小区域是隐藏的 middleArea.offsetWidth 无法拿到宽度
console.log(middleArea.offsetWidth);
var oScale = middleImg.offsetWidth / parseInt(getStyle(middleArea, "width"))
//鼠标进入小图,让小区域显示
middleImg.onmouseenter = function(){
$("#middleArea").show();
$("#bigArea").show(800);
//middleArea.style.display = "block";
//bigArea.style.display = "block";
document.onmousemove = function(evt){
var e = evt || window.event;
var mX = e.pageX - oBox.offsetLeft - middleImg.offsetLeft - middleArea.offsetWidth / 2;
if(mX <= 0){
mX = 0;
}
if(mX > middleImg.offsetWidth - middleArea.offsetWidth){
mX = middleImg.offsetWidth - middleArea.offsetWidth;
}
var mY = e.pageY - oBox.offsetTop - middleImg.offsetTop - middleArea.offsetHeight / 2;
if(mY <= 0){
mY = 0;
}
if(mY > middleImg.offsetWidth - middleArea.offsetWidth){
mY = middleImg.offsetWidth - middleArea.offsetWidth;
}
middleArea.style.left = mX + "px";
middleArea.style.top = mY + "px";
//移动大图
bigImg.style.left = -oScale * mX + "px";
bigImg.style.top = -oScale * mY + "px";
}
}
middleImg.onmouseleave = function(){
document.onmousemove = null;
}
var oLis = document.querySelectorAll('#small li');
for(var [k, o] of oLis.entries()){
o.index = k;
o.onclick = function(){
//alert(this.index);
// middleImg.children[0].src = `images/images2/${this.index + 1}_2.jpeg`;
// bigArea.children[0].src = `images/images2/${this.index + 1}_3.jpeg`;
middleImg.children[0].src = `src/images/ams${this.index + 1}.jpg`;
bigArea.children[0].src = `src/images/ams${this.index + 1}.jpg`;
}
}
middleImg.onmouseleave = function(){
$("#middleArea").hide();
$("#bigArea").hide(400);
document.onmousemove = null;
}
}
$(function () {
$(".footer").load('./footer.html',function () {
//console.log("底部加载完成后执行");
})
})
</script>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。