有趣的小米网站

前言

检验成果的时候到了！这次的写的是一个小米官网页面 ，这个项目是由html+css+JavaScript三个结合写的，从学习JavaScript的时候，知道它能做许多页面的交互效果，提高用户的体验感！ 它可以使页面跳动起来，感觉效果应该会不错。所以就来尝试了一下，感受JavaScript带来的美好体验。

一、首页上部、返回顶部以及登录注册页面

这个首页我是大体分为 header 和 banner两个部分，banner部分就是下面大图，用js来实现的轮播图，这里我采用的是插件swiper，引入相关的文件加之修改html和css的内容；然后再将header拆分为了头部分（head）和头部导航栏（nav-header）两部分，是按照上下一层一层的排列，即 按照标准流的上下来排列，总体设置margin：0 1226px就行。剩下的每部分中的内容就会使用到浮动和定位让元素在一行内或上下显示了。

2.返回顶部

                                                   

 这home-bar部分采用固定定位fixed，把他定在banner部分最右边底下，图片是引用的是字体图标，第二张图片的效果是用JavaScript实现的

html部分

 <!-- 返回顶部 -->
    <div class="home_bar">
        <a href="javascript:;" class="item">
            <div class="icon">
                <em class="iconfont">&#xe8c6;</em>
            </div>
            <span class="text">手机APP</span>
            <div class="pop_content">
                <img src="images/XIao mi_imgs/xiaomi-android.png" alt="">
                <span class="prices">扫码领取新人百元红包</span>
            </div>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon">
                <em class="iconfont">&#xe651;</em>
            </div>
            <span class="text">个人中心</span>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon">
                <em class="iconfont">&#xe7d6;</em>
            </div>
            <span class="text">售后服务</span>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon">
                <em class="iconfont">&#xe88f;</em>
            </div>
            <span class="text">客服中心</span>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon">
                <em class="iconfont">&#xe602;</em>
            </div>
            <span class="text">购物车(0)</span>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon">
                <em class="iconfont">&#xe65b;</em>
            </div>
            <span class="text">回顶部</span>
        </a>
    </div>

css部分--这部分实现的是基本的样式，如定位，颜色和大小之类的，使用hover实现鼠标放上去的字体颜色变化

.home_bar {
    position: fixed;
    z-index: 99;
    left: 50%;
    margin-left: 613px;
    bottom: 40px;
}

.home_bar .item {
    position: relative;
    display: block;
    margin-top: -1px;
    background-color: #fff;
    border: 1px solid #f5f5f5;
    text-align: center;
    color: #757575;
    width: 25px;
    height: 40px;
}

.home_bar .item .icon {
    position: relative;
    margin: 0 auto 8px;
    width: 20px;
    height: 36px;
    /* padding-top: 10px; */
    font-size: 20px;
    text-align: center;
}

.home_bar .item .icon em {
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
    background-color: #fff;
    /* color: #333; */
    font-size: 20px;
    text-align: center;
    opacity: 1;
}

.home_bar .item .text {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    width: 60px;
    height: 30px;
    line-height: 28px;
    background-color: #fff;
    padding: 0 8px;
    border: 1px solid #f5f5f5;
    text-align: center;
    color: #757575;
    transition: color .3s;
    transition: all .3s;
    
}

.home_bar .item .pop_content {
    display: none;
    position: absolute;
    right: 35px;
    top: 0px;
    padding: 14px;
    border: 1px solid #f5f5f5;
    transform: translateZ(0);
    /* opacity: 0; */
}

.home_bar .item .pop_content img {
    display: block;
    height: 100px;
    width: 100px;
    margin: 6px auto;
    color: #757575;
}

.home_bar .item .pop_content span {
    display: block;
    width: 82px;
    color: #757575;
    margin: 14px auto 0;
    text-align: center;
}

.home_bar .item .icon:hover em {
    color: #ff6700;
}

JS--这实现的是鼠标触碰到每一个a（字体图标）上会显示对应的文字和其他的功能；离开就none了；还有最重要的是最后一个回顶部的图标，点击它就回到顶部模块

// 返回顶部home_bar
    var home_bar = document.querySelector('.home_bar');
    var home_top = home_bar.children[5];
    var top = home_top.children[0];
    var a_all = home_bar.querySelectorAll('a');
    for (var i = 0; i < a_all.length; i++) {
        a_all[i].addEventListener('mouseenter', function() {
            for (var i = 0; i < a_all.length; i++) {
                var spantext = a_all[i].querySelector('.text');
                // console.log('a' + spantext);
                spantext.style.display = 'none';

            };
            var spantext = this.querySelector('.text')
            spantext.style.display = 'block';
            spantext.style.left = '-81px';
            spantext.style.top = '21%';

        });
        a_all[i].addEventListener('mouseleave', function() {

            var spantext = this.querySelector('.text')
            spantext.style.display = 'none';


        });


    }
    // 当我们点击了返回顶部模块，就让窗口滚动到页面的最上方
    top.addEventListener('click', function() {
        // window.scroll(x, y);  滚动窗口至文档中的特定位置,注意里面的x和y不跟单位，直接写数字
        // window.scroll(0, 0);
        // 因为是窗口滚动 所以对象是window
        animate(window, 0);
        top.style.transition = 'all 1s';
    });

    // 动画函数
    function animate(obj, target, callback) {
        // console.log(callback);  callback = function() {};  调用的时候 callback()
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们的步长值改为整数 不要出现小数的问题
            var step = (target - window.pageYOffset) / 10;
            // 判断步长是正值还是负值 
            // 如果是正值，则步长往大了的取整（向上取整 Math.ceil() ，如8.1 取到9）
            // 如果是负值，则步长往小了的取整（向下取整 Math,floor() ，如-8.1 取到-8）
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                // 调用函数