原生代码开发小米官网首页_小米官网首页代码-CSDN博客

本文链接：https://blog.csdn.net/MoYuP_ENG/article/details/126529144

前言

小米官网原生代码的开发花了我一个多星期的时间，首页基本布局花费三天时间，js代码书写两天，登录、注册页面，布局花费了一天时间，js书写花费了两天时间，接下来我就给大家展示一下我的制作过程，因为总体的代码篇幅过长，就不做过多展示，该篇我就展示总体的布局及部分带有js的模块。

一、总体布局

首页的模块主要分为五大块，头部导航、主导航栏、商品展示、底部导航、底部声明、右侧导航栏

布局中多次使用浮动、定位及flex布局。注意清除浮动，及定位时的子绝父相的问题，还有一点值得注意的是，使用flex布局后使用js进行显示隐藏时，显示要用display：flex；不然显示出来布局会乱。

二、部分js模块展示

1.头部导航栏的下拉模块

值得注意的是将code盒子高度设置为0时，要给其一个overflow：hidden；才能将其内容完全隐藏，还有盒子三角应该在code盒子内，用一个透明盒子将三角装着并给code一个#fff的背景颜色，造成一个三角在盒子外的既视感。剩余的js部分就十分简单了。

HTML：

                    <li><a href="javascript:;" class="cod">
                        下载app
                        <!-- js二维码 -->
                        <div class="code">
                            <span class="iconfont">
                                <div></div>
                            </span>
                           <div class="cod_bd">
                            <img src="img/xiaomi-android.png">
                            <p>小米商城APP</p>
                           </div>
                        </div>
                    </a>
                    </li>

css：

/* js二维码 */

.code {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    transform: translateX(-35px);
    height: 0px;
    top: 15px;
    transition: height .3s;
}

.cod_bd {
    background-color: #fff;
    border: 1px solid #e0e0e0;
}

.code img {
    width: 90px;
    height: 90px;
    margin: 15px 15px 0 15px;
}

.code p {
    color: #757575;
    margin: 0 15px;
    font-size: 15px;
}

.code span {
    display: block;
    color: #fff;
    height: 25px;
    background-color: transparent;
    text-align: center;
}

.code span div {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    z-index: 2;
}

js：

// js二维码 通过过渡实现缓动效果
    var code = document.querySelector('.code');
    var cod = document.querySelector('.cod');
    var cod_img = cod.querySelector('img');
    cod.addEventListener('mouseenter', function() {
        code.style.height = 172 + 'px';
    });
    cod.addEventListener('mouseleave', function() {
        code.style.height = 0 + 'px';
    });

效果图：

2.轮播图和左侧导航栏的布局

轮播图和左侧导航栏都是用的绝对定位，所以在html结构中轮播图代码段应在左侧导航的上方，不然左侧导航栏会被轮播图覆盖。左侧导航的js就是用tab切换的方法（用自定义属性去绑定相应的模块）去对相应的模块进行显示隐藏，轮播图也是常见的布局和方法。最值得注意的还是布局结构。

3.右侧导航栏

右侧导航栏就是用固定定位定于右侧，该模块核心是利用scroll来进行判断对返回按钮的显示与隐藏，及其点击缓动返回顶部。

html：

 <!-- 右侧边导航栏 -->
    <div class="navtimes">
        <ul>
            <li><a href="javascript:;" class="iconfont icon-weibiaoti1">手机APP</a>
                <div class="code code_r">
                    <span>
                        <div></div>
                    </span>
                    <div class="cod_bd">
                        <img src="img/xiaomi-android.png">
                        <p>扫码领取新<br> 人百元福利
                        </p>
                    </div>
                </div>
            </li>
            <li><a href="javascript:;" class="iconfont icon-geren">个人中心</a></li>
            <li><a href="javascript:;" class="iconfont icon-weixiubanshou">售后服务</a></li>
            <li><a href="javascript:;" class="iconfont icon-wodekefu">人工客服</a></li>
            <li><a href="javascript:;" class="iconfont icon-gouwuche">购物车</a></li>
        </ul>
        <div class="backTop">
            <a href="javascript:;" class="iconfont icon-huidaodingbu">回顶部</a>
        </div>
    </div>

css：

/* 右侧导航栏 */

.navtimes {
    text-align: center;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.navtimes ul {
    border: 1px solid #cfccca;
}

.navtimes li,
.navtimes .backTop {
    width: 84px;
    height: 84px;
    line-height: 120px;
    background-color: #fff;
    position: relative;
}

.navtimes a {
    color: #333;
}

.navtimes li a:hover,
.navtimes .backTop a:hover {
    color: #ff6700;
}

.navtimes li:nth-of-type(-n+4) {
    border-bottom: 1px solid #cfccca;
}

.navtimes .backTop {
    margin-top: 20px;
    border: 1px solid #cfccca;
    display: none;
}

.navtimes a:before {
    position: absolute;
    top: -30px;
    left: 30%;
    font-size: 30px;
    height: 0px;
}

js：

 // 返回顶部
    var backTop = document.querySelector('.backTop');
    var advertising = document.querySelector('.advertising');
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= advertising.offsetTop) {
            backTop.style.display = 'block';
        } else {
            backTop.style.display = 'none';
        }
    });
    backTop.addEventListener('click', function() {
        animater(window, 0);
    });

    function animater(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()

        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            // obj.style.left = obj.offsetLeft + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15);
    }

效果图：