持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

之前看到有很多个人博客里有很多关于鼠标移动、点击等响应特效，今天我仿了一个鼠标移动的特效，即让一个小人随着鼠标移动。

一、准备两个HTML标签

• 第一个是鼠标活动区域标签，即你想鼠标有小人跟随的区域

• 第二个是随鼠标移动的标签，即放置小人的标签

二、为相关标签设置css属性

这里主要是为鼠标活动区域标签设置宽度高度、背景颜色以及使用外边距让该标签水平居中

 

三、Js部分

（一）获取移动区域标签，和随鼠标移动的标签

（二）为随鼠标移动的标签设置样式

需要设置的样式有：

• 为标签设置绝对单位

• 标签的宽度和高度

• 将准备好的小人图标图片设置为标签的背景图片

• 设置背景图片的平铺格式、位置以及尺寸

• 将标签隐藏

 

我准备的小人图片图片如下，为svg格式，图片来源于图标网站：iconstore，直接下载后有三种格式

 

（三）计算随鼠标移动标签的活动范围

计算活动范围，即计算标签left和top属性的最大值和最小值

 

（四）设置鼠标移动响应事件

• 鼠标移动到活动范围，显示随鼠标移动标签

• 获取鼠标距离浏览器上边和左边的位置，这里对pageX和pageY属性做了兼容处理

• 为随鼠标移动标签设置left和top属性，为了让鼠标的顶点停留在小人图标的中心，这里我将标签的left和top属性值都分别减去了标签宽度和高度的一半

• 当鼠标移出活动范围时，隐藏随鼠标移动的标签

 

最后，在活动区域内，让小人随着鼠标移动的特效就完成啦！