Skip to content

Commit 50ed1b4

Browse files
committed
modify some details to improve the performance of readme.md as asked
1 parent 50e1f84 commit 50ed1b4

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

day16 - mouseMoveShadow/README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 16 文字阴影的鼠标随动效果
22

3-
> 本篇作者:©[大史快跑Dashrun](https://github.com/soyaine)——Chinasoft Frontend Web Developer
3+
> 本篇作者:©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
44
55
> 简介:[JavaScript30](https://javascript30.com)[Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 16 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
66
@@ -15,7 +15,7 @@
1515

1616
## 基本知识
1717
`text-shadow`样式为标准CSS3样式,用于添加**一个或多个**文字阴影,用于其的语法格式为:
18-
```
18+
```css
1919
text-shadow: h-shadow v-shadow blur color
2020

2121
```
@@ -24,17 +24,17 @@ text-shadow: h-shadow v-shadow blur color
2424
1.在`script`标签中,我们使用3个变量,一个指向`div`元素,一个指向其子元素`h1`,最后一个变量`factor`用于标记阴影距离`h1`中心的距离和鼠标距离`h1`中心距离的比例,用于计算阴影的具体位置。
2525

2626
2.在`hero`元素上监听鼠标移动事件`mousemove`,并添加事件处理的回调函数`shadowMove`.
27-
```
27+
```js
2828
hero.addEventListener('mousemove',shadowMove);
2929
```
3030

3131
3.为获得第一个阴影的瞬时位置,需要通过鼠标位置距离`h1`中心的距离乘以`factor`系数来获得,`pos`表示鼠标当前位置的坐标,range指代`hero`元素的宽和高:
32-
```
32+
```js
3333
var disX = parseInt((pos.x-range.x/2)*factor);
3434
var disY = parseInt((pos.y-range.y/2)*factor);
3535
```
3636
4.从事件发生的event对象中获取需要的值:
37-
```
37+
```js
3838
var range = {
3939
x:hero.offsetWidth,
4040
y:hero.offsetHeight
@@ -45,7 +45,7 @@ hero.addEventListener('mousemove',shadowMove);
4545
}
4646
```
4747
5.计算出`h1`元素第一个阴影位置后,可以以坐标镜像或旋转90°等不同的方式来生成其他阴影,本例中我们采用绕`h1`元素中心旋转90°的方式共生成4个阴影:
48-
```
48+
```js
4949
text.style.textShadow = `
5050
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
5151
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),

0 commit comments

Comments
 (0)