小米商城网页制作（附源码）

源码链接在文末( • ̀ω•́ )✧。

🎉小米商城网页
✨欢迎大家访问我的个人博客：随风起の博客
💖如果觉得本篇文章还不错的话，欢迎大家点赞👍+收藏❤️+评论🤞

目录

前言

一、介绍

二、首页

1.*轮播图

2.css动画实现秒杀模块

3.小米秒杀模块左侧

4.*侧边栏

5.购物车经过弹出盒子

6.必要模块字体图标

 二、商品页面

 1.商品分类展示

 2.*放大镜

三、注册页面

1.页面展示

2.经过注册小米账号出现彩条

总结

---

前言

        当时学习完html/css/js/jquery后，自己动手做了一个小米官网的静态页面（包括首页、商品详情页、注册页面。当时做这些还是有些难度，尤其是放大镜模块与轮播图模块的开发。代码可能会有更好的优化方式，希望大家多多指正，提些建议，相互学习哈(´^ω^`) 。

---

学习所用

一、介绍

首页思维导图

 商品页思维导图

 注册页面思维导图

二、首页

1.*轮播图

• 右下角圆点由图片个数决定，动态生成

• 节流阀 互斥锁，防止用户不断点击出现的图片快速滑动

左侧商品模块

2.css动画实现秒杀模块

部分代码如下：

@keyframes move2 {
    0% {
        transform: translateX(0px);
    }
    33% {
        transform: translateX(-978px);
    }
    66% {
        transform: translateX(-1956px);
    }
    100% {
        transform: translateX(0px);
    }
}

3.小米秒杀模块左侧

这里实时显示当前时间

JS代码如下

<script type="text/javascript">
        function showTime() {
            //时间列表
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth();
            var date = today.getDate();
            var ww = today.getDay();
            var hour = today.getHours();
            var minute = today.getMinutes();
            var second = today.getSeconds();
            var flag = "A.M.";
            var week = new Array("日", "一", "二", "三", "四", "五", "六");
            //宽度对齐
            if (hour < 10) hour = "0" + hour;
            if (minute < 10) minute = "0" + minute;
            if (second < 10) second = "0" + second;
            if (hour >= 12) flag = "P.M.";
            var i = hour + "点:" + minute + "分:" + second + "秒" + flag;
            // alert(i);
            document.getElementById('d').innerText = hour;
            // alert(document.getElementById('d').innerText);
            document.getElementById('f').innerText = minute;
            document.getElementById('c').innerText = second;

        }

        setInterval("showTime();", 1000);

    </script>

4.*侧边栏

• 当滑动至轮播图页面以下会自动显示，同时监测滑动位置并让对应模块图标亮起。
• 利用锚点链接：点击直接到达指定区域
• 同时，当鼠标经过手机APP时会滑出二维码（图片无法显示，可下载源码后查看）

                          

---

5.购物车经过弹出盒子

6.必要模块字体图标

                               

---

 二、商品页面

点击如下模块进入

 1.商品分类展示

鼠标经过全部商品分类弹出商品列表

 2.*放大镜

 经过商品图片会显示放大镜，鼠标移出则消失。

放大镜JS代码如下：

 <!-- 放大镜样式 -->
    <script type="text/javascript">
        window.onload = function () {
            var box = document.getElementsByClassName("detail_le")[0];
            var small = box.children[0];
            var big = box.children[1];
            var bigImg = big.children[0];
            var mask = small.children[1];

            //big和mask在鼠标移入small时显示，移出时隐藏
            small.onmouseenter = function () {
                big.style.display = "block";
                mask.style.display = "block";
            };
            small.onmouseleave = function () {
                big.style.display = "none";
                mask.style.display = "none";
            };

            small.onmousemove = function (event) {
                event = event || window.event;
                //mask跟随鼠标移动，且不会超出small范围
                //x作为mask的left值，y作mask的top值。
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;

                //减去mask宽高的一半，让鼠标在mask的中间
                var x = pagex - box.offsetLeft - mask.offsetWidth / 2;
                var y = pagey - box.offsetTop - mask.offsetHeight / 2;

                //不让mask超出small
                if (x < 0) {
                    x = 0;
                }
                if (x > small.offsetWidth - mask.offsetWidth) {
                    x = small.offsetWidth - mask.offsetWidth;
                }
                if (y < 0) {
                    y = 0;
                }
                if (y > small.offsetHeight - mask.offsetHeight) {
                    y = small.offsetHeight - mask.offsetHeight;
                }

                mask.style.left = x + "px";
                mask.style.top = y + "px";

                //bigImg随着mask的移动移动
                //比例 = 大图移动的距离/mask移动的距离 = 大图/小图
                var scale = bigImg.offsetWidth / small.offsetWidth;

                bigImg.style.marginLeft = -scale * x + "px";
                bigImg.style.marginTop = -scale * y + "px";
            }
        };
    </script>

三、注册页面

点击注册进入注册页面

1.页面展示

表单验证功能

2.经过注册小米账号出现彩条

总结

        实践出真知，希望大家可以多练习，巩固知识！(*^▽^*)

源码链接：

小米商城网页: 小米商城网页源码制作 (gitee.com)

最后不要忘记点个赞呐(＠＾０＾)👍