仿京东移动端首页

程序员文章站 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中的滑动事件主要是三个：

touchstart: 开始滑动事件
touchmove: 滑动移动事件
touchend: 滑动结束事件

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

仿京东移动端首页

仿京东移动端首页

技术介绍

Android仿京东金融首页头像效果

Android仿京东金融首页头像效果

js实现移动端编辑添加地址【模仿京东】

vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例

js实现移动端编辑添加地址【模仿京东】

jQuery仿京东首页广告图片切换图片轮播

jquery仿移动端支付宝键盘

vs2015怎么编写移动端仿淘宝页面?

移动端h5直播项目|html5直播实战开发|h5仿陌陌