欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

仿京东移动端首页

程序员文章站 2022-03-29 08:11:48
...

仿京东移动端首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东移动站——首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="jd_container">
        <header>
            <div class="logo_jd"><a href="javascript:;"><i class="icon_jd"></i></a></div>
            <div class="search">
                <div class="sear_btn"><i class="icon_search r-right"></i></div>
                <div class="input_goods">
                    <label>
                        <input type="search" class="sear_v" name="goods"/>
                    </label>
                </div>
            </div>
            <div class="login r-right">
                <a href="javascript:;">登录</a>
            </div>
        </header>
        <!--轮播-->
        <div class="carousel_box">
            <nav class="carousel_img">
                <a><img src="img/l8.jpg"/></a>
                <a><img src="img/l1.jpg"/></a>
                <a><img src="img/l2.jpg"/></a>
                <a><img src="img/l3.jpg"/></a>
                <a><img src="img/l4.jpg"/></a>
                <a><img src="img/l5.jpg"/></a>
                <a><img src="img/l6.jpg"/></a>
                <a><img src="img/l7.jpg"/></a>
                <a><img src="img/l8.jpg"/></a>
                <a><img src="img/l1.jpg"/></a>
            </nav>
            <nav class="carousel_sub">
                <a href="javascript:;" class="active"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </nav>
        </div>

        <!--导航栏-->
        <div class="class_menu">
            <div class="menu">
                <label>
                    <a><img src="img/nav0.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav1.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav2.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav3.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav4.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav5.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav6.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
            <div class="menu">
                <label>
                    <a><img src="img/nav7.png"></a>
                </label>
                <label>
                    <a href="javascript:;">分类</a>
                </label>
            </div>
        </div>

        <!--掌上描述-->
        <div class="pocket_desc">
            <div class="desc_title">
                <span class="title z-left">掌上描述</span>
                <div class="time z-left">
                    <label>
                        <span>0</span>
                        <span>0</span>
                    </label>
                    <label>:</label>
                    <label>
                        <span>0</span>
                        <span>0</span>
                    </label>
                    <label>:</label>
                    <label>
                        <span>0</span>
                        <span>0</span>
                    </label>
                </div>
                <span class="r-right">更多></span>
            </div>
            <div class="pocket_goods">
                <div class="p-good">
                    <label for="">
                        <a href="javascript:;"><img src="img/detail01.jpg" /></a>
                    </label>
                    <label for=""><span>¥88.00</span></label>
                    <label for=""><span><s>¥100.00</s></span></label>
                </div>
                <div class="p-good">
                    <label for="">
                        <a href="javascript:;"><img src="img/detail02.jpg" /></a>
                    </label>
                    <label for=""><span>¥4999.00</span></label>
                    <label for=""><span><s>¥6999.00</s></span></label>
                </div>
                <div class="p-good">
                    <label for="">
                        <a href="javascript:;"><img src="img/detail01.jpg" /></a>
                    </label>
                    <label for=""><span>¥88.00</span></label>
                    <label for=""><span><s>¥100.00</s></span></label>
                </div>
            </div>
        </div>

        <!--京东超市-->
        <div class="hot-sell">
            <div class="jd_title">
                <span>京东超市</span>
            </div>
            <div class="jd_hot">
                <div class="hot hot_left">
                    <label for=""><img src="img/cp1.jpg" /></label>
                </div>
                <div class="hot hot_right">
                    <label for=""><img src="img/cp2.jpg" /></label>
                    <label for=""><img src="img/cp3.jpg" /></label>
                </div>
            </div>
        </div>

        <!--京东自营-->
        <div class="self-sell">
            <div class="jd_title">
                <span>京东自营</span>
            </div>
            <div class="jd_s">
                <div class="s s_left">
                    <label for=""><img src="img/cp5.jpg" /></label>
                    <label for=""><img src="img/cp6.jpg" /></label>
                </div>
                <div class="s s_right">
                    <label for=""><img src="img/cp4.jpg" /></label>
                </div>
            </div>
        </div>
        <!--京东热门-->
        <div class="hot-sell">
            <div class="jd_title">
                <span>京东热门</span>
            </div>
            <div class="jd_hot">
                <div class="hot hot_left">
                    <label for=""><img src="img/cp1.jpg" /></label>
                </div>
                <div class="hot hot_right">
                    <label for=""><img src="img/cp2.jpg" /></label>
                    <label for=""><img src="img/cp3.jpg" /></label>
                </div>
            </div>
        </div>

    </div>

    <script src="js/utils.js"></script>
    <script src="js/index.js"></script>
</body>
</html>
/**
 * CSS文件
 * Time: 2018/9/12
 * Author: SanPhantom
 * Feature: 
 */

.jd_container {
    position: relative;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-flow: row;
    width: 100%;
    height: 40px;
    background-color: rgba(255, 0, 0, 0);
    z-index: 1000;
}
.logo_jd {
    width: 80px;
    height: 40px;
    padding: 5px 10px;
    vertical-align: middle;
    text-align: center;
}
.icon_jd {
    display: block;
    background-position: 0 -107px;
    width: 60px;
    height: 30px;
}
.search {
    display: flex;
    flex-flow: row;
    flex: 1;
    padding: 5px 0;
    margin: 2px 0;
    height: 36px;
    background-color: #fff;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
}
.sear_btn {
    width: 40px;
    height: 30px;
    background-color: #fff;
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px;
}
.icon_search {
    display: block;
    width: 25px;
    height: 30px;
    background-position: -60px -107px;
}
.input_goods {
    width: calc(100% - 45px - 18px);
}
.sear_v {
    width: 100%;
    height: 100%;
    line-height: 100%;
}
.login {
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.login a {
    color: #fff;
    font-size: 16px;
}

/*----- 轮播 ------*/
.carousel_box {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.carousel_box .carousel_img {
    display: flex;
    width: 1000%;
    transform: translateX(-10%);
}
.carousel_img a {
    flex: 1;
}
.carousel_img a img {
    width: 100%;
    height: 100%;
}
.carousel_box .carousel_sub {
    display: flex;
    width: 160px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -80px;
}
.carousel_sub a {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border: 1px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.active {
    background-color: #fff;
}

/*------ 导航栏 -----*/
.class_menu {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.menu {
    width: 25%;
    padding: 2%;
    display: flex;
    flex-flow: column;
    text-align: center;
}
.menu img {
    width: 40px;
    height: 40px;
}

/*------- 掌上描述 -------*/
.pocket_desc {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ccc;
}
.desc_title {
    width: 100%;
    height: 30px;
    padding: 10px;
}
.desc_title .title {
    color: red;
    font-size: 18px;
}
.desc_title .title::before {
    content: " ";
    display: inline-block;
    float: left;
    margin-right: 10px;
    width: 18px;
    height: 20px;
    margin-top: 2px;
    background-image: url("../img/seckill-icon.png");
    background-size: 100% 100%;
}
.desc_title .time {
    display: flex;
    flex-flow: row;
}
.time label {
    display: flex;
    flex-flow: row;
}
.time label>span {
    display: block;
    padding:0 5px;
    background-color: #333;
    color: #fff;
    margin: 0 2px;
}
.pocket_goods {
    width: 100%;
    display: flex;
    flex-flow: row;
    padding: 20px 0;
}
.pocket_goods .p-good {
    flex: 1;
    display: flex;
    flex-flow: column;
    /*padding: 0 5%;*/
    text-align: center;
}
.p-good label:first-child {
    padding: 0 20%;
    border-right: 1px solid #ccc;
}
.pocket_goods .p-good:last-child label:first-child {
    border: 0;
}
.p-good span {
    display: block;
    color: red;
    margin-bottom: 10px;
}
.p-good span s{
    color: #ccc;
}
.p-good img {
    width: 100%;
    height: 100%;
}

/*------ 京东自营 ------*/
.self-sell, .hot-sell {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ccc;
}
.jd_title {
    width: 100%;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
}
.jd_title span {
    font-size: 18px;
}
.jd_title span:before {
    content: "";
    display: block;
    width: 3px;
    height: 13px;
    float: left;
    margin-right: 8px;
    margin-top: 5px;
    background-color: red;
}
.jd_s, .jd_hot {
    display: flex;
}
.jd_s .s, .jd_hot .hot {
    flex: 1;
}
.s_left, .hot_right {
    display: flex;
    flex-flow: column;
}
.hot_left {
    border-right: 1px solid #ccc;
}
.hot_right label:first-child {
    border-bottom: 1px solid #ccc;
}
label img {
    width: 100%;
    height: 100%;
}
/**
 * JavaScript文件
 * Time: 2018/9/12 10:24
 * Author: SanPhantom
 * Feature:
 */

//

let search = function () {
    //默认顶部是透明背景
    //当页面滚动时,随着页面卷曲的高度越大,透明度也就越大
    //当页面滚动时,超过某一定高度时,透明度不变

    let searchBox = document.querySelector("header");
    let banner = document.querySelector(".carousel_box");
    let bannerHeight = banner.offsetHeight;
    //监听页面滚动事件
    window.onscroll = function () {
        //获取卷曲的高度
        let scrollTop = document.documentElement.scrollTop;
        let opacity = 0;
        if (scrollTop <= bannerHeight) {
            opacity = (scrollTop / bannerHeight) * 0.85;
        } else {
            opacity = 0.85;
        }
        searchBox.style.background = "rgba(201, 21, 35," + opacity + ")";
    }
};

let banner = function () {
    //自动轮播且无缝
    //点要随着图片的轮播而改变
    //滑动效果  touch事件
    //当滑动结束时,未超过屏幕的三分之一,则吸附回去

    let banner = document.querySelector('.carousel_box');
    let bannerWidth = banner.offsetWidth;
    //图片容器
    let imageBox = banner.querySelector('nav:first-child');
    let pointBox = banner.querySelector('nav:last-child');
    //所有的点
    let points = pointBox.querySelectorAll('a');

    //封装函数
    let addTransition = function () {
        //过渡
        imageBox.style.transition = 'all 0.2s';
        imageBox.style.webkitTransition = 'all 0.2s';
    };
    let removeTransition = function () {
        //瞬间定位,清除过渡
        imageBox.style.transition = 'none';
        imageBox.style.webkiTransition = 'none';
    };
    let setTransform = function (width) {
        //位移
        imageBox.style.transform = 'translateX(' + (width) + 'px)';
        imageBox.style.webkitTransform = 'translateX(' + (width) + 'px)';
    };
    let setPoint = function () {
        let nowLi = pointBox.querySelector("a.active");
        nowLi.classList.remove('active');
        points[index - 1].classList.add("active");
    };
    let interval = function () {
        index++;
        addTransition();
        setTransform(-index * bannerWidth);
    };

    let index = 1;
    let timer = setInterval(interval, 1000);
    //监听最后一张过渡完成,然后瞬间回到第一张
    imageBox.addEventListener('transitionend', function () {
        if (index >= 9) {
            index = 1;
            removeTransition();
            setTransform(-index * bannerWidth);
        }
        if (index <= 0) {
            index = 8;
            removeTransition();
            setTransform(-index * bannerWidth);
        }
        //设置点容器
        setPoint();
    });

    //设置滑动效果
    let startX = 0;
    let distanceX = 0;
    let isMove = false;
    imageBox.addEventListener('touchstart', function (e) {
        //获取开始滑动的x坐标
        startX = e.touches[0].clientX;

    });
    imageBox.addEventListener('touchmove', function (e) {
        clearInterval(timer);
        //移动到哪里的一个横坐标
        let moveX = e.touches[0].clientX;
        //计算滑动的距离
        distanceX = moveX - startX;
        setTransform(-index * bannerWidth + distanceX);

        isMove = true;
        //根据这个参数做判断
    });
    imageBox.addEventListener('touchend', function (e) {
        //判断滑动的距离 < 宽度的三分之一
        if (isMove) {
            if (Math.abs(distanceX) >= bannerWidth / 3) {
                index = distanceX < 0 ? ++index : --index;
            }
            addTransition();
            setTransform(-index * bannerWidth);
            startX = 0;
            distanceX = 0;
            isMove = false;
            clearInterval(timer);
            timer = setInterval(interval, 1000);
        }
    });
};

let newTime = function () {
    let spans = document.querySelectorAll('.time span');
    let timeBox = document.querySelector(".time");
    function setTime(time) {
        let timer = setInterval(function () {
            time--;
            //转化时分秒
            let h = Math.floor(time / 3600);
            let m = Math.floor(time % 3600 / 60);
            let s = Math.floor(time % 60);
            spans[0].innerHTML = Math.floor(h / 10);
            spans[1].innerHTML = h % 10;
            spans[2].innerHTML = Math.floor(m / 10);
            spans[3].innerHTML = m % 10;
            spans[4].innerHTML = Math.floor(s / 10);
            spans[5].innerHTML = s % 10;

            if (time <= 0) {
                clearInterval(timer);
                timeBox.innerHTML = "活动已结束";
            }
        }, 1000);
    }
    function timer() {
        //获取当前时间
        let date = new Date();
        //转化为毫秒
        let now = date.getTime();
        console.log(now);

        let end = new Date("2018/9/13 22:00:00");
        let endtime = end.getTime();
        console.log(endtime);
        let time = (endtime - now) / 1000;
        setTime(time);
    }

    timer();
};

window.onload = function () {
    //顶部搜索
    search();
    //轮播图
    banner();
    //升级版倒计时
    newTime();
};

界面如下:

仿京东移动端首页

技术介绍

在这里我们主要是轮播图的左右滑动来进行轮播,因此说一下JS中的滑动事件。

JS中的滑动事件主要是三个:

  1. touchstart: 开始滑动事件
  2. touchmove: 滑动移动事件
  3. touchend: 滑动结束事件

在上面的代码中,我们还可以看见有一个属性值touches,这个属性是你滑动事件中的当前屏幕上所有触摸点的列表;可以通过这个来获取我们触摸点的坐标,以便来完成我们滑动的距离。

相关标签: 移动端