小米首页效果

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

小米首页可以自行仿照官网进行布局，看过我文章的小伙伴应该都没问题吧

本次项目重点在于实现一些简单的效果，而且用的都是简单的事件，相信大家一看就懂，下面就举两个例子

效果图

先上图

//获取元素
var app = document.querySelector('.app');
    var ewm = document.querySelector('.ewm');
    app.addEventListener('mouseover', function () {
        ewm.style.display = 'block';
    })
    app.addEventListener('mouseleave', function () {
        ewm.style.display = 'none';
    })

这个和弹出二维码那个是一样的，都是鼠标经过和离开事件，再加以属性修饰即可

详细代码可扫描下方二维码回复“小米官网”下载

面试题

BOM事件?

事件就是用户或浏览器自身执行的某种动作.事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件

常见BOM事件?

load：当页面或图像加载完后立即触发
blur：元素失去焦点
focus：元素获得焦点
click：鼠标点击某个对象
change：用户改变域的内容
mouseover：鼠标移动到某个元素上
mouseout：鼠标从某个元素上离开
keyup：某个键盘的键被松开
keydown：某个键盘的键被按下

---

• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可