Day16 - 鼠标移动让文字出现🌈效果中文指南
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
鼠标移动时,元素的字体阴影随着鼠标移动的方向发生改变,达到字体阴影随着鼠标一起走的效果。
基础知识
text-shadow
none
:无阴影<length>
①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>
②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>
③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<color>
:设置对象的阴影的颜色。
解构赋值
解构赋值(destructuring assignment)语法是一个Javascript表达式,它使得从数组或者对象中提取数据赋值给不同的变量成为可能。
1 | let a, b, rest; |
MouseEvent
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。
pageX 设置或获取指针位置相对于整个文档的x坐标
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY 设置或获取指针位置相对于整个文档的y坐标
页面元素offset的几个属性示例
该图是对本例子的例子的更改,为外层元素加上了
relative
定位属性,并更改了其高度和宽度的值,为了显示以下所示效果。
- HTMLElement.offsetParent:是一个只读属性,指向最近的包含该元素的定位元素.如果没有定位的元素,则 offsetParent 为最近的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。
offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。 - HTMLElement.offsetTop:指的是当前元素到其offsetParent指向元素的上边距的距离。(如图所示)
- HTMLElement.offsetLeft:指的是当前元素到其offsetParent指向元素的左边距的距离。(如图所示)
- HTMLElement.offsetHeight:指的是当前元素的高度,包含content,padding,border的高度值,但不包括margin的值。(如图所示)
- HTMLElement.offsetWidth:指的是当前元素的宽度,包含content,padding,border的高度值,但不包括margin的值。(如图所示)
js代码
1 | const hero = document.querySelector('.hero'); |
- 分别获取到鼠标所在位置相对于页面左侧和顶端的距离,将这两个距离映射为自己想要移动的距离上(
walk
); - 其中当鼠标移动中间的文字上的时候,由于
e.target
变化了,所以造成x的值不连续,因此需要监测e.target
的值,判断是否指在了文字上; - 为元素设置字体阴影,text-shadow样式,也可以设置多个,达到类似霓虹灯的效果;
- 对元素添加
mousemove
事件。