前端新手项目练习50projects50days——悬停板（ho
2021-11-02 本文已影响0人
简单一点点
本项目介绍如何实现一个悬停板，鼠标悬停在指定区域时，对应地方的网格会改变颜色，实现悬停效果。鼠标移走后过一段时间效果消失。
hoverboard.png
html 部分比较简单，主要是一块类名为container的显示区域。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符编码 -->
<meta charset="UTF-8" />
<!-- 虚拟窗口设置，宽度为设备宽度，缩放比例为1.0-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入css -->
<link rel="stylesheet" href="style.css" />
<!-- 标题 -->
<title>Hoverboard</title>
</head>
<body>
<!-- 实际显示区域-->
<div class="container" id="container"></div>
<!-- 引入js -->
<script src="script.js"></script>
</body>
</html>
js部分主要是将显示区域划分为一个一个的小方块网格，然后为每个网格添加鼠标移入和移出的两个监听事件。当鼠标移入后为网格添加背景色和阴影，鼠标移出之后再取消，这样就实现了悬停板的效果。
// 显示区域元素
const container = document.getElementById('container')
// 颜色
const colors = ['#e74c3c', '#8e44ad', '3498db', '#e67e22', '#2ecc71']
// 网格大小
const SQUARES = 500
// 将显示区域分割成一个一个小方块网格
for(let i = 0; i < SQUARES; i++) {
const square = document.createElement('div')
square.classList.add('square')
// 添加鼠标移入元素时的事件
square.addEventListener('mouseover', () => setColor(square))
// 添加鼠标移出元素时的事件
square.addEventListener('mouseout', () => removeColor(square))
container.appendChild(square)
}
// 设置网格颜色
function setColor(element) {
const color = getRandomColor()
// 背景颜色
element.style.background = color
// 阴影
element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}
// 移出网格颜色
function removeColor(element) {
element.style.background = '#1d1d1d'
element.style.boxShadow = ` 0 0 2px #000`
}
//从颜色数组随机获取一个颜色
function getRandomColor() {
return colors[Math.floor(Math.random() *colors.length)]
}
CSS部分代码如下，整体采用了弹性布局，其中代表小方块网格的 square 类添加了一个简单的过渡效果，并且在鼠标悬浮上去的时候会结束过渡动画。
* {
box-sizing: border-box; /* 采用 border-box 方式计算元素宽高*/
}
body {
background-color: #111; /* 背景颜色 */
display: flex; /* 布局方式采用弹性布局 */
align-items: center; /* 元素在容器垂直方向居中对齐，用于display: flex中 */
justify-content: center; /* 元素在容器水平方向居中对齐，用于display: flex中 */
height: 100vh; /* 高度为视口高度 100% */
overflow: hidden; /* 元素溢出部分隐藏 */
margin: 0; /* 元素外边距为0 */
}
.container {
display: flex; /* 布局方式采用弹性布局 */
align-items: center; /* 元素在容器垂直方向居中对齐，用于display: flex中 */
justify-content: center; /* 元素在容器水平方向居中对齐，用于display: flex中 */
flex-wrap: wrap; /* 元素在必要时候可以换行，用于display: flex中 */
max-width: 400px; /* 元素最大宽度 */
}
.square {
background-color: #1d1d1d; /* 背景颜色 */
box-shadow: 0 0 2px #000; /* 阴影 */
height: 16px; /* 高度 */
width: 16px; /* 宽度 */
margin: 2px; /* 外边距 */
transition: 2s ease; /* 过渡效果持续2s，使用ease（先快后慢） */
}
.square:hover { /* 鼠标悬浮到类square上 */
transition-duration: 0s; /* 过渡效果改为0s */
}
就这样通过一个简单的小项目实现了一个漂亮的悬停板。
hoverboard1.gif
