456主机测评
源码链接在文末( • ̀ω•́ )✧。
🎉小米商城网页
✨欢迎大家访问我的个人博客：随风起の博客
💖如果觉得本篇文章还不错的话，欢迎大家点赞👍+收藏❤️+评论🤞
目录
前言
当时学习完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.经过注册小米账号出现彩条
总结
实践出真知，希望大家可以多练习，巩固知识！(*^▽^*)
源码链接：
链接：https://pan.baidu.com/s/17NXFiAahTGKoudsT0XdL0Q
提取码：b03k
最后不要忘记点个赞呐(＠＾０＾)👍
- 海报
