如何在CSS中映射的鼠标位置，并实现经过鼠标移动控制页面元素效果

时间  2021-03-20
标签 css html 框架 函数 性能 flex spa code orm htm 栏目 CSS 繁體版
原文   原文链接
映射鼠标位置或实现拖拽效果，咱们能够在 JavaScript 中作到这一点。但实际上，在CSS中有更加简洁的方法，咱们能够在不使用 JavaScript 的状况下，仍然能够实现相同的功能！

只使用CSS就能够实现模仿鼠标"点击和拖动"效果，让咱们来看看如何得到用户的鼠标位置，并将其映射到 CSS 自定义属性：--positionX 和 --positionY 中。下面是具体实现步骤。css

初始化

咱们的第一个 demo 将使用 --positionX 和 --positionY 自定义属性来设置元素的宽度和高度。html

<div class="content">
  <div class="square"></div>
</div>
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh;
}
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: 100px;
  height: 100px;
  background: white;
}

10.1

这是咱们最初的状态。咱们这里有一个了名为 .content 的容器 <div>，它的的宽度和高度填充满 body，它是项目的内容主体。类名为 .square 的 <div> 是在这个例子中咱们想用鼠标来进行控制的元素。框架

咱们还在内容中添加了两个自定义属性。咱们将使用鼠标位置来设置这些属性的值，而后使用它们来设置 .square 元素的宽高。函数

一旦咱们为鼠标位置绘制了自定义属性，咱们几乎可使用它们来作咱们想要的任何事情。例如，咱们可使用它们来设置一个绝对定位元素的 top/left、控制 transform 属性、设置 background-position、调整 color，甚至设置伪元素的内容等。咱们将在文章的结尾看到一些这样的演示效果及对应的Codepen 项目连接。性能

grid 网格

目标是在屏幕上建立一个不可见的网格，并使用 :hover 伪类将每一个"单元格"映射成咱们自定义属性的一组值。此时，当鼠标光标移动到屏幕的右侧时，--positionX 的值将更高：当鼠标向左移动时，它变得更低。对于 --positionY 也是同样的：当光标移动到顶部时，值将更低，当光标移动到底部时，值会更高。flex

关于我网格大小及网格分块须要注意的地方：实际上咱们可使任何咱们能够达到的网格尺寸。它越大，自定义属性值就越准确。但这也意味着咱们将有更多网格分块区间，网格分块过多可能会致使性能问题，根据实际项目保持适当的平衡地调整网格大小是很是重要的。

如今，假如咱们须要一个10×10网格，因此总共100个网格分块在咱们容器中。（在实际开发中可使用pug等语法快速建立表格，例子中100个空间所有用 div 表示出来了）spa

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

因为级联关系，将 .cell 元素放在 .content 元素前面。code

咱们但愿使用 .cell 类来控制 .square，因为CSS的级联关系，一个元素只能控制其子子元素（或子元素的子元素）及位置在它的后面的兄弟元素（或兄弟元素的子元素）orm

这意味着两件事：htm

  • 每一个 .cell 必须先于须要控制的元素（在这个例子中为 .square）。
  • 不能把这些 .cell 放在一个容器里，若是咱们这样作.content 元素就再也不是他们的兄弟元素。

定位单元格

有不少方法能够定位 .cells。好比咱们可使用 position: absolute，并设置它们的 top 和 left 属性；或者咱们也能够经过 transform 来转换位置；但最简单的选择实际上是使用 display: grid。

body {
  background-color: #000;
  height: 100vh;
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  z-index: 2;
}

border 只是暂时的，在开发中因此咱们能够看到屏幕上的网格，稍后会删除它。
z-index 很是重要，由于咱们但愿单元格出如今内容顶层。

如下是咱们目前完成的内容：

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  z-index: 2;
 }
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: 100px;
  height: 100px;
  background: white;
}

10.2

添加值

咱们想经过 .cell 来设置 --positionX 和 --positionY 的值。

当咱们 hover 悬停在第一个（左列）.cell上时，--positionX 值应为 0。当咱们悬停在第二列中的 .cell 上时，值应为 1。第三 2 ，等等。

y轴 也是如此。当咱们悬停在第一行（顶部）.cell上时，--positionY 应该为 0 ，当咱们悬停在第二行的单元格上时，值应该是 1，等等。

10.3

从左到右按顺序排列着白色边框和数字的黑色十乘十方格。

图像中的数字表示网格中每一个单元格的编号。若是以一个单一的 .cell 为例——42号单元格——咱们可使用 :nth-child()来选择它：

.cell:nth-child(42) { }

但咱们须要记住几件事：

  • 咱们只但愿此选择器只在 hover 悬停在单元格上时生效，所以咱们须要给它附件 :hover。
  • 咱们但愿选择的是 .content 元素而不是单元格自己，所以须要使用通常兄弟选择器~ 来作到这一点。

所以，如今当第42个单元格处于 hover 状态时，要将 --positionX 设置为 1 与--positionY 设置为 3，须要这样作：

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

可是有100个单元格，谁想这样作100次呢！？有几种方法可使上述操做变得更容易：

  1. 使用 Sass 中的 @for 循环来遍历全部 100 个单元格，并作一些数学运算，每次遍历设置对应的的 --positionX 和 --positionY值。
  2. 将 x 轴和 y 轴分开，用带有:nth-child 的功能符号分别选择每行和每列。
  3. 结合这两种方法，同时使用Sass @for 循环和 :nth-child 功能符号。

我深思熟虑过什么是最简单最好的方法，虽然全部方法都有优缺点。根据要编写的代码数量、编译代码的质量和数学复杂性方面的考虑，最终我选择了第三种方法。若是你有更好的方法，能够在评论中告诉我。

用 @for 循环设置值

@for $i from 0 to 10 {
 .cell:nth-child(???):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(???):hover ~ .content {
    --positionY: #{$i};
  }
}

这是一个基本循环框架，咱们须要循环10次，由于上述构造的网格有10行和10列。将网格分为 x轴和 y轴 ，对每列设置 --positionX，对每行设置 --positionY。如今要作的是找到一个合适的数学表达式，填到 ??? 处，来进行选择每行和每列。

让咱们从 x轴 开始

回到咱们上面带有数字的网格图像，咱们能够看到 第2列 中全部单元格的数字是 10的倍数加2。第2列 中的单元格是 10的倍数加3...

如今，让咱们把它转换成 :nth-child 的功能表达式。如下是第2列能够表示为：

:nth-child(10n + 2)
  • 10n表示选择每一个10的倍数。
  • 2 是列号，在咱们的循环中，将用 #{$i +1] 替换列号来按顺序重复。
.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
  --positionX: #{$i};
}

如今让咱们处理y轴

再看一遍网格图像，关注 第4行，网格编号介于 41与50 之间。第5行 的网格编号在 51与60 之间等等。要选择每行，咱们须要定义其范围。例如，第四行的范围是：

.cell:nth-child(n + 41):nth-child(-n + 50)

(n + 41) 是范围的开始。
(-n + 50) 是范围的结尾。
如今，咱们用 $i值 的来代替数学公式中的数字。对于范围的开始，获得 (n + #{10 * $i + 1}) ，对于范围结尾得到 (-n + #{10 * ($i + 1)})。

所以，最终的 @for 循环是：

@for $i from 0 to 10 {
  .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --positionY: #{$i};
  }
}

映射完成！当咱们悬停在元素上时，--positionX 和 --positionY 的值会根据鼠标位置而变化。这意味着咱们可使用它们来控制内容中的元素。

处理自定义属性

好了，如今咱们已经把鼠标位置映射到两个自定义属性，接下来的事情是使用它们来控制 .square 元素的宽度和高度值。

让咱们从宽度开始，假设咱们但愿 .square 元素的的最小宽度为 100px（即当鼠标光标位于屏幕左侧时），咱们还但愿鼠标光标向右移动的每一步都增加 20px。

使用 calc()，就能够实现：

.square {
  width: calc(100px + var(--positionX) * 20px);
}

对于高度咱们作一样的操做，但用 --positionY 代替：

.square {
  width: calc(100px + var(--positionX) * 20px);
  height: calc(100px + var(--positionY) * 20px);
}

就是这样！如今咱们有一个简单的 .square 元素，宽度和高度由鼠标位置控制。将鼠标光标在界面移动，查看正方形的宽度和高度如何相应地变化，下面是整个示例的完整代码。

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  // border: 1px solid gray;
  z-index: 2;
}
@for $i from 0 to 10 {
 .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --positionY: #{$i};
  }
}
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: calc(100px + var(--positionX) * 20px);
  height: calc(100px + var(--positionY) * 20px);
  background: white;
  transition: all 0.3s;
}

10.4

我添加了一个小的过渡效果，看起来更顺畅。固然，这不是必须的。我也注释了 .cell 元素的的 border。

让咱们尝试一种替代方法

可能会有一种状况，即您想要"绕过" --positionX 和 --positionY，并将最终值直接设置在 @for循环 中。对于咱们的例子而言，能够像下面这样实现：

@for $i from 0 to 10 {
 .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --squareWidth: #{100 + $i * 20}px;
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --squareHeight: #{100 + $i * 20}px;: #{$i};
  }
}

.square 元素从而能够这样自定义属性：

.square {
  width: var(--squareWidth);
  height: var(--squareHeight);
}

这种方法相比较而言更灵活一些，由于它容许更高级的 Sass 数学（和字符串）函数，但它的主要原理与咱们示例的内容是彻底相同的。

接下来呢？

好吧，剩下的就由你决定如何使用——并且可能性是无穷无尽的！你能在 CSS 中更进一步地使用映射鼠标位置地技巧吗？下面是几个页面图形会随着鼠标变换的例子：

10.5

10.6

10.7

10.8

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程