定制软件源码链接在文末( • ̀ω•́ )✧。
🎉定制软件小米商城网页
✨定制软件欢迎大家访问我的个人博客:
💖定制软件如果觉得本篇文章还不错的话,定制软件欢迎大家点赞👍+收藏❤️+评论🤞
目录
前言
定制软件当时学习完html/css/js/jquery后,定制软件自己动手做了一个小米定制软件官网的静态页面(包括首页、商品详情页、注册页面。当时做这些还是有些难度,尤其是放大镜模块与模块的开发。代码可能会有更好的优化方式,希望大家多多指正,提些建议,相互学习哈(´^ω^`) 。
学习所用
一、介绍
首页思维导图
商品页思维导图
注册页面思维导图
二、首页
1.*轮播图
- 右下角圆点由图片个数决定,动态生成
-
节流阀 互斥锁,防止用户不断点击出现的图片快速滑动
左侧商品模块
2.实现秒杀模块
部分代码如下:
- @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
最后不要忘记点个赞呐(@^0^)👍