仿京东商城

其他 2020-01-25 09:39:32 阅读次数: 0 
<!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>&nbsp;LHB&nbsp;</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">&nbsp;搜索&nbsp;</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>&nbsp;京东秒杀</div>
            <div>18点场</div>
            <a href="javaScript:void (0);">更多秒杀<span><img src="../img/JDright.png"></span></a>&nbsp;
        </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%;
}

image.png
image.png
bandicam-2020-01-17-10-18-22-418.gif

Hello Hongbin
发布了13 篇原创文章 · 获赞 4 · 访问量 344
私信 关注

猜你喜欢

转载自blog.csdn.net/printf_hello/article/details/104015032
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022