仿京东移动端首页

其他 2018-10-12 08:30:32 阅读次数: 0

仿京东移动端首页

<!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，这个属性是你滑动事件中的当前屏幕上所有触摸点的列表；可以通过这个来获取我们触摸点的坐标，以便来完成我们滑动的距离。

猜你喜欢

转载自blog.csdn.net/qq_36752728/article/details/82693589
今日推荐
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