项目一：小米官网

最新推荐文章于 2023-10-23 10:21:32 发布

芋泥丶

最新推荐文章于 2023-10-23 10:21:32 发布

阅读量549

点赞数 1

分类专栏：前端 JavaScript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_53619602/article/details/125879502

版权

这个项目是模仿小米官方网站而展开设计的，其目的是为了锻炼html+css+javascript综合知识的使用
本项目需结合HTML+CSS+JS等技术进行开发的一个综合项目。在本项目的开发中，需要结合的知识点有：

HTML
CSS
JS基础语法，对象，DOM增删查改，事件

开发页面

首页

根据小米官方主页面设计，下面是部分截图
在这里插入图片描述

主页面开发要求：

利用HTML、CSS技术实现主页布局；

实现导航栏中“下载App”，和“购物车”,的下拉效果

实现二级导航栏中商品显示效果

实现侧边导航栏中商品显示效果

轮播图效果

1. 利用HTML、CSS技术实现主页布局；

html+css代码并不困难，这里就直接跳过了

2. 实现导航栏中“下载App”，和“购物车”,的下拉效果

首先实现下载app的下拉效果

请添加图片描述
我们需要先获取相应的元素对象

html代码
 <li class="download">
    <a href="javascript:;">下载app</a>
    <div class="sanjiao"></div>
    <span class="code">
        <img src="images/xiaomi-android.png" alt="">
        <p>小米商城APP</p>
    </span>
 </li>

先从html中获取，因为我们是 鼠标经过(mouseenter) 相应的 li 时下拉出现二维码，接下来获取二维码部分，也就是span标签那部分，只有鼠标经过才会下拉出现，所以一开始在css代码中先用 display：none 先将span部分隐藏起来；在触发后再将它显示出来，还要再注册离开事件，将下拉出来的二维码收回去。

js
  var download = topnav.querySelector('.download');
    var sanjiao = topnav.querySelector('.sanjiao');
    var code = topnav.querySelector('.code');
      //下载app部分
    download.addEventListener('mouseenter', function () {
   
        clearInterval(timer);
        sanjiao.style.display = 'block';
        var timer = setInterval(function () {
   
            var x = (148 - code.offsetHeight) / 10;
            x = x > 0 ? Math.ceil(x) : Math.floor(x);
            code.style.height = code.offsetHeight + x + 'px';
            if (code.offsetHeight >= 148) {
   
                clearInterval(timer);
                timer = null;
            }
        })
    })
      download.addEventListener('mouseleave', function () {
   
        sanjiao.style.display = 'none';
        var timer1 = setInterval(function () {
   
            var x = (code.offsetHeight - 0) / 10;
            x = x > 0 ? Math.ceil(x) : Math.floor(x);
            code.style.height = code.offsetHeight - x + 'px';
            if (code.offsetHeight <= 0) {
   
                clearInterval(timer1);
            }
        })
    }