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