仿移动端京东商城

青乌

 关注

阅读 63

2023-02-14


仿移动端京东商城_html


仿移动端京东商城_html5_02


仿移动端京东商城_html5_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shop</title>
    <link rel="stylesheet" href="../css/小商城.css">
    <script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="container">
    <!--    填补-->

    <div id="search">
        <span> LHB </span>
        <div id="test">
            <input type="text" maxlength="20" cleardefault="no" autocomplete="off" placeholder="电子琴" class="ipt">
            <span><img src="../img/相机_01.png"></span>
        </div>
        <span class="search"> 搜索 </span>
    </div>
    <div id="day"></div>
    <div id="banner">
        <img src="../img/JDhead1.jpg" alt="1">
        <img src="../img/JDhead2.jpg" alt="2">
        <img src="../img/JDhead3.jpg" alt="3">
        <img src="../img/JDhead4.jpg" alt="3">
    </div>
    <div class="center">
        <div><img src="../img/JD1.png.webp"><span>京东超市</span></div>
        <div><img src="../img/JD2.png.webp"><span>数码电器</span></div>
        <div><img src="../img/JD3.png.webp"><span>京东服务</span></div>
        <div><img src="../img/JD4.png.webp"><span>京东生鲜</span></div>
        <div><img src="../img/JD.png.webp"><span>京东到家</span></div>
        <div><img src="../img/JD6.png.webp"><span>充值缴费</span></div>
        <div><img src="../img/JD7.png.webp"><span>9.9元拼</span></div>
        <div><img src="../img/JD8.png.webp"><span>领卷</span></div>
        <div><img src="../img/JD9.png.webp"><span>赚钱</span></div>
        <div><img src="../img/JD10.png.webp"><span>PLUS会员</span></div>
    </div>

    <div class="action">
        <div><img src="../img/JD11.jpg"></div>
        <div><img src="../img/JD12.png!q70.jpg"></div>
        <div><img src="../img/JD13.png!q70.jpg"></div>
    </div>
    <!--秒杀区-->
    <div class="KO">
        <!--上栏 -->
        <div>
            <div> 京东秒杀</div>
            <div>18点场</div>
            <a href="javaScript:void (0);">更多秒杀<span><img src="../img/JDright.png"></span></a> 
        </div>
        <!--商品-->
        <div>
            <img src="../img/JD20.jpg" alt="20">
            <img src="../img/JD21.jpg" alt=21"">
            <img src="../img/JD22.jpg" alt="22">
            <img src="../img/JD23.jpg" alt="23">
        </div>
    </div>
    <!--新人区-->
    <div id="two">
        <div><img src="../img/JD30.jpg"></div>
        <div><img src="../img/JD31.jpg"></div>
    </div>
    <div class="year"><img src="../img/year.png.webp"></div>

    <!--滚动-->
    <div id="con">
        <marquee behavior="alternate" scrollamount="20" onMouseOut="this.start()" onMouseOver="this.stop()">
            <div><img src="../img/JD35.jpg"></div>
            <div><img src="../img/JD36.jpg"></div>
            <div><img src="../img/JD37.jpg"></div>
            <div><img src="../img/JD38.jpg"></div>
            <div><img src="../img/JD39.jpg"></div>
            <div><img src="../img/JD40.jpg"></div>
            <div><img src="../img/JD41.jpg"></div>
        </marquee>
    </div>

    <div id="inner">
        <div><span>无线充手机</span><img src="../img/JD50.jpg"><span>热销爆款</span></div>
        <div><span>我是电视榜</span><img src="../img/JD51.jpg"><span>年货好礼</span></div>
        <div><span>甄选白酒</span><img src="../img/JD52.jpg"><span>只为你甄选</span></div>
        <div><span>火锅丸料</span><img src="../img/JD53.jpg"><span>应有尽有</span></div>
    </div>

    <div id="inner_down">
        <div><img src="../img/JD61.jpg"><span>至高24期免息</span><strong>手机爆款</strong></div>
        <div><img src="../img/JD62.jpg"><span>领卷199享8折</span><strong>甄选箱包</strong></div>
        <div><img src="../img/JD63.jpg"><span>抢百亿红包</span><strong>家电年货节</strong></div>
        <div><img src="../img/JD64.jpg"><span>满2020减1212</span><strong>平板式电脑</strong></div>
        <div><img src="../img/JD61.jpg"><span>至高24期免息</span><strong>爆款清单</strong></div>
        <div><img src="../img/JD62.jpg"><span>领卷199享8折</span><strong>超市年货节</strong></div>
        <div><img src="../img/JD63.jpg"><span>抢百亿红包</span><strong>珠宝饰品</strong></div>
        <div><img src="../img/JD64.jpg"><span>满2020减1212</span><strong>食品礼盒</strong></div>
    </div>
    <div class="recommended"><img src="../img/JD70.png"></div>
<!--    瀑布流-->
<!--未完待续-->
    <div class="bug"><img src="../img/JDbug.png" alt=""></div>






</div>
<script src="../js/小商城.js"></script>
</body>
</html>

//顶部搜索栏
var search = function () {
    let search = document.querySelector('#search');
    let banner = document.querySelector('#banner');

    let h = banner.offsetHeight;
    // console.log(h);
    //判断一个人元素是否滑倒底(或者根本不可滑动)：element.scrollHeight - element.scrollTop === element.clientHeight
    // console.log(document.body.scrollHeight-document.body.scrollTop);
    // console.log(document.body.scrollTop);//0
    // console.log(document.body.clientHeight);
    //console.log(document.body.scrollHeight-document.body.scrollTop === document.body.clientHeight);

    //监听页面滚动事件
    window.onscroll = function () {
        //随着滚动距离增大，透明度减小

        //当前滚动距离
        // let oTop =document.body.scrollTop;//chrome
        //scrollTop是一个正数，如果元素不能滚动，则scrollTop为0
        // 可用作返回顶部 scrollTop = 0
        let oTop = window.pageYOffset;
        //console.log(oTop);
        // let oTop = document.documentElement.scrollTop;//IE

        var opacity = 0;
        if (oTop > h) {
            opacity = 1;
        } else {
            opacity = 1 * (oTop / h);
        }
        search.style.background = 'rgba(255, 0, 0, ' + opacity + ')';
    }

};
search();
//轮播图
var index=0;
//改变图片
function ChangeImg() {
    index++;
    var a=document.querySelector('#banner').querySelectorAll("img");
    if(index>=a.length) index=0;
    for(var i=0;i<a.length;i++){
        a[i].style.display='none';
    }
    a[index].style.display='block';
}
//设置定时器，每隔两秒切换一张图片
setInterval(ChangeImg,2000);

//

* {
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    width: 1000px;
    height: 3000px;
    background: url("../img/bg2.jpg") no-repeat;
    background-size: 100%;
}

#day {
    height: 100px;
}

#search {
    width: 1000px;
    height: 100px;
    background: rgba(255, 0, 0, 0);
    position: fixed;
    z-index: 1;
}

span:first-child {
    position: relative;
    top: 20px;
    font-size: 3rem;
    color: #d7ddde;
    cursor: pointer;
}

.search {
    color: white;
    font-size: 40px;
    /*font-weight: bold;*/
    cursor: pointer;
    position: relative;
    top: 18px;
}

.search:hover {
    color: #333333;
}

#test {
    width: 750px;
    height: 60px;
    position: relative;
    margin: 0 auto;
    top: 10px;
    border-radius: 30px;
    display: inline-block;
    border: 3px solid #333333;
    background: white;
}

#test input {
    height: 90%;
    width: 85%;
    position: relative;
    left: 20px;
    top: 2px;
    border: none;
    outline: none;

}

#test span img {
    /*position: absolute;*/
    float: right;
    margin-right: 20px;
    margin-top: 7px;
    width: 50px;
    /*z-index: 1;*/
}

#test span img:hover {
    filter: drop-shadow(0 0 0px black);
}

#banner {
    margin: 0 auto;
    height: 370px;
    width: 90%;
    /*background: #92bde7;*/
    position: relative;

}

#banner img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    box-shadow: 0 0 50px 2px #333333;
}

#banner img:first-child {
    display: block;
}

#banner img:nth-of-type(2) {
    display: none;
}

#banner img:nth-of-type(3) {
    display: none;
}

#banner img:nth-of-type(4) {
    display: none;
}


.center {
    box-sizing: border-box;
    width: 1000px;
    height: 400px;
    /*background: #a3a3a3;*/
}

.center div {
    float: left;
    margin: 45px;
    width: 110px;
    height: 110px;
    background: #333333;
    border-radius: 45%;
}

.center div img {
    width: 100%;
    height: auto;
    border-radius: 40%;
}

.center div img:hover {
    /*box-shadow: 0 1px 5px 1px rgba(0,0,255,0.5);*/
    width: 101%;
    height: 101%;
}

.center div span {
    display: inline-block;
    width: 100px;
    color: #ffffff;
    font-size: .6rem;
    text-align: center;
    margin-top: .3rem;
    cursor: pointer;
}

.center div span:hover {
    text-decoration: underline;
    color: blue;
}

.action {

}

.action div {
    display: inline-block;

}

.action div:first-child {
    position: relative;
    left: 120px;
}

.action div:nth-child(2) {
    position: relative;
    left: 110px;
}

.action div:nth-of-type(3) {
    position: relative;
    left: 100px;
}

.action div img {
    border-radius: 40px;
}

.action div img:hover{
    width: 101%;
    height: 101%;
}
.KO {
    margin: 0 auto;
    width: 950px;
    height: 300px;
    background: white;
    border-radius: 30px;
}

.KO div:first-child {
    height: 90px;
    background: url("../img/JDKO.png") no-repeat;
    background-size: 100%;
}

.KO div:first-child div:first-child {
    font-weight: bold;
    font-size: 30px;
    display: inline-block;
}

.KO div:first-child div:nth-child(2) {
    display: inline-block;
    height: initial;
}

.KO div:first-child a {
    position: relative;
    right: 30px;
    float: right;
    text-decoration: none;
}

.KO div:first-child span img{
    width: 20%;
    position: relative;
    right: 0px;
    top: 15px;
    float: right;
}
.KO div:nth-child(2) {
    height: 210px;
}

.KO div:nth-child(2) img {
    margin: 40px;
    width: 15%;
}

#two {
    width: 800px;
    height: 300px;
    margin: 0 auto;
}

#two div {
    position: relative;
    left: 3%;
    top: 10%;
    float: left;
    display: inline-block;

}

#two div:first-child img {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

#two div:nth-of-type(2) img {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

#con {
    background: #90EE90;
}

#con div {
    display: inline-block;
    margin: 0 auto;
}

.year img {
    width: 100%;
}

#inner div {
    position: relative;
    left: 2%;
    width: 20%;
    height: 270px;
    float: left;
    background: url("../img/JD42.jpg") no-repeat;
    background-size: 100% 100%;
    margin: 20px;
}

#inner {
    width: 1000px;
    height: 300px;
    background: linear-gradient(90deg, pink, hotpink);
}

#inner span {
    display: block;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    color: white;
    position: relative;
    top: 0;
}

#inner img {
    width: 80%;
    position: relative;
    left: 20px;
}

#inner_down {
    width: 1000px;
    height: 700px;
    background: linear-gradient(90deg, pink, hotpink);
}

#inner_down div {
    width: 20%;
    height: 270px;
    float: left;
    margin: 20px;
    position: relative;
    left: 2%;
    background: url("../img/JD60.jpg") no-repeat;
    background-size: 100% 100%;
}

#inner_down div img {
    width: 70%;
    position: relative;
    left: 29px;
    top: 20px;
}

#inner_down div span {
    display: block;
    text-align: center;
    font-size: 25px;
    color: white;
    position: relative;
    top: 18px;
}

#inner_down div strong {
    font-weight: bold;
    color: white;
    font-size: 35px;
    display: block;
    text-align: center;
    position: relative;
    top: 30px;
}

.recommended {
    width: 1000px;
}

.recommended img {
    width: 100%;
}

.bug {
    width: 1000px;
}

.bug img {
    width: 100%;
    height: 100%;
}


相关推荐

手写移动端导航栏（仿京东）实例【VUE3】

程序猿不脱发2 74 0 0

移动端+京东移动端首页制作

凛冬已至夏日未远 71 0 0

Flutter仿京东客户端

江南北 85 0 0

HTML+CSS作品展示（仿写京东移动端首页②）

梦为马 76 0 0

仿京东项目——京西商城（数据库设计）

星巢文化 12 0 0

京东移动端首页制作

Gascognya 44 0 0

京东移动端首页（静态）

一叶随风_c94d 56 0 0

仿写的移动端壁纸网站

星河出山 110 0 0

移动端-仿B站页面练习

伽马星系 41 0 0

Flutter仿京东商城APP实战 用户中心基础布局

吴wuwu 17 0 0

精彩评论（0）

0 0 举报