master

分支 (1)

管理

管理

master

diwudadao
/
shop.html

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