小米商城网页制作（附源码） |
您所在的位置：网站首页 › 官方小米商城首页 › 小米商城网页制作（附源码） |
小米商城网页制作（附源码）
|
源码链接在文末( • ̀ω•́ )✧。
🎉小米商城网页✨欢迎大家访问我的个人博客：随风起の博客💖如果觉得本篇文章还不错的话，欢迎大家点赞👍+收藏❤️+评论🤞 目录 前言 一、介绍 二、首页 1.*轮播图 2.css动画实现秒杀模块 3.小米秒杀模块左侧 4.*侧边栏 5.购物车经过弹出盒子 6.必要模块字体图标 二、商品页面 1.商品分类展示 2.*放大镜 三、注册页面 1.页面展示 2.经过注册小米账号出现彩条 总结 前言当时学习完html/css/js/jquery后，自己动手做了一个小米官网的静态页面（包括首页、商品详情页、注册页面。当时做这些还是有些难度，尤其是放大镜模块与轮播图模块的开发。代码可能会有更好的优化方式，希望大家多多指正，提些建议，相互学习哈(´^ω^`) 。 学习所用 一、介绍首页思维导图
商品页思维导图
注册页面思维导图
节流阀 互斥锁，防止用户不断点击出现的图片快速滑动
左侧商品模块
部分代码如下： @keyframes move2 { 0% { transform: translateX(0px); } 33% { transform: translateX(-978px); } 66% { transform: translateX(-1956px); } 100% { transform: translateX(0px); } } 3.小米秒杀模块左侧这里实时显示当前时间
JS代码如下 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); 4.*侧边栏 当滑动至轮播图页面以下会自动显示，同时监测滑动位置并让对应模块图标亮起。利用锚点链接：点击直接到达指定区域同时，当鼠标经过手机APP时会滑出二维码（图片无法显示，可下载源码后查看）
点击如下模块进入
鼠标经过全部商品分类弹出商品列表
经过商品图片会显示放大镜，鼠标移出则消失。 放大镜JS代码如下： 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"; } }; 三、注册页面点击注册进入注册页面
表单验证功能
实践出真知，希望大家可以多练习，巩固知识！(*^▽^*) 源码链接： 小米商城网页: 小米商城网页源码制作 (gitee.com) 最后不要忘记点个赞呐(＠＾０＾)👍 |
【本文地址】
今日新闻 |
推荐新闻 |