Skip to content

Commit 0a33a07

Browse files
dashnowordsdashnowords
authored
Merge pull request soyaine#2 from soyaine/master
pull to update
2 parents c9e94ee + c1a4fcf commit 0a33a07

File tree

12 files changed

+476
-0
lines changed

12 files changed

+476
-0
lines changed

‎16 - Mouse Move Shadow/README.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# 16 文字阴影的鼠标随动效果
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 16 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-08-20
8+
最后更新：2017-08-21
9+
10+
## 挑战任务
11+
初始文件`index-start.html`中提供了一个包含了`h1`元素的`div`元素，`h1`元素已经设置了`text-Shadow`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。
12+
13+
## 实现效果
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day16-mouseMoveShadow/effects.png)
15+
16+
## 基本知识
17+
`text-shadow`样式为标准CSS3样式，用于添加**一个或多个**文字阴影，用于其的语法格式为：
18+
```css
19+
text-shadow: h-shadow v-shadow blur color
20+
21+
```
22+
23+
## 过程指南
24+
1.在`script`标签中，我们使用3个变量，一个指向`div`元素，一个指向其子元素`h1`，最后一个变量`factor`用于标记阴影距离`h1`中心的距离和鼠标距离`h1`中心距离的比例，用于计算阴影的具体位置。
25+
26+
2.在`hero`元素上监听鼠标移动事件`mousemove`，并添加事件处理的回调函数`shadowMove`.
27+
```js
28+
hero.addEventListener('mousemove',shadowMove);
29+
```
30+
31+
3.为获得第一个阴影的瞬时位置，需要通过鼠标位置距离`h1`中心的距离乘以`factor`系数来获得，`pos`表示鼠标当前位置的坐标,range指代`hero`元素的宽和高：
32+
```js
33+
var disX = parseInt((pos.x-range.x/2)*factor);
34+
var disY = parseInt((pos.y-range.y/2)*factor);
35+
```
36+
4.从事件发生的event对象中获取需要的值：
37+
```js
38+
var range = {
39+
x:hero.offsetWidth,
40+
y:hero.offsetHeight
41+
}
42+
var pos = {
43+
x:e.target.offsetLeft+e.offsetX,
44+
y:e.target.offsetTop+e.offsetY
45+
}
46+
```
47+
5.计算出`h1`元素第一个阴影位置后，可以以坐标镜像或旋转90°等不同的方式来生成其他阴影，本例中我们采用绕`h1`元素中心旋转90°的方式共生成4个阴影：
48+
```js
49+
text.style.textShadow = `
50+
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
51+
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
52+
${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
53+
${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
54+
`;
55+
```

‎16 - Mouse Move Shadow/effects.png

35.5 KB
Loading

‎16 - Mouse Move Shadow/index-finished-es5.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mouse Shadow-ES5</title>
6+
</head>
7+
<body>
8+
9+
<div class="hero">
10+
<h1 contenteditable>🔥WOAH!</h1>
11+
</div>
12+
<!--CSS part-->
13+
<style>
14+
html {
15+
color:black;
16+
font-family: sans-serif;
17+
}
18+
19+
body {
20+
margin: 0;
21+
}
22+
23+
.hero {
24+
min-height: 100vh;
25+
display:flex;
26+
justify-content: center;
27+
align-items: center;
28+
color:black;
29+
}
30+
31+
h1 {
32+
text-shadow: 10px 10px 0 rgba(0,0,0,1);
33+
font-size: 100px;
34+
}
35+
</style>
36+
<!--Js part-->
37+
<script>
38+
var hero = document.querySelector('.hero');
39+
var text = hero.querySelector('h1');
40+
var factor = 0.4;//当鼠标移动至显示区域边界时，阴影距离占hero元素宽和高的比例
41+
//在div范围内监听
42+
hero.addEventListener('mousemove',shadowMove);
43+
44+
//文字阴影效果及移动函数
45+
function shadowMove(e){
46+
var range = {
47+
x:hero.offsetWidth,
48+
y:hero.offsetHeight
49+
}
50+
var pos = {
51+
x:e.target.offsetLeft+e.offsetX,
52+
y:e.target.offsetTop+e.offsetY
53+
}
54+
//计算阴影移动距离
55+
var disX = parseInt((pos.x-range.x/2)*factor);
56+
var disY = parseInt((pos.y-range.y/2)*factor);
57+
//修改阴影样式
58+
text.style.textShadow = disX+'px '+disY+'px 0 #3498db,'+(-disX)+'px '+disY+'px 0 #1abc9c,'+disY+'px '+(-disX)+'px 0 #9b59b6,'+(-disY)+'px '+(-disX)+'px 0 #e74c3c';
59+
}
60+
</script>
61+
</body>
62+
</html>

‎16 - Mouse Move Shadow/index-finished-es6.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mouse Shadow</title>
6+
</head>
7+
<body>
8+
9+
<div class="hero">
10+
<h1 contenteditable>🔥WOAH!</h1>
11+
</div>
12+
13+
<style>
14+
html {
15+
color:black;
16+
font-family: sans-serif;
17+
}
18+
19+
body {
20+
margin: 0;
21+
}
22+
23+
.hero {
24+
min-height: 100vh;
25+
display:flex;
26+
justify-content: center;
27+
align-items: center;
28+
color:black;
29+
}
30+
31+
32+
h1 {
33+
text-shadow: 10px 10px 0 rgba(0,0,0,1);
34+
font-size: 100px;
35+
}
36+
</style>
37+
38+
<script>
39+
//高级选择器
40+
const hero = document.querySelector('.hero');
41+
const text = hero.querySelector('h1');
42+
const factor = 0.4; //当鼠标移动至显示区域边界时，阴影距离占hero元素宽和高的比例
43+
44+
function shadowMove(e) {
45+
//解构赋值
46+
const { offsetWidth: width, offsetHeight: height } = hero;
47+
let { offsetX: x, offsetY: y } = e;
48+
49+
//将鼠标位置转换为相对视口左上角的坐标，本例中由于hero元素占满视口故未起实际作用
50+
if (this !== e.target) {
51+
x = x + e.target.offsetLeft;
52+
y = y + e.target.offsetTop;
53+
}
54+
55+
const xWalk = parseInt((x-width/2)*factor);
56+
const yWalk = parseInt((y-height/2)*factor);
57+
58+
//使用模板字符串赋值
59+
text.style.textShadow = `
60+
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
61+
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
62+
${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
63+
${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
64+
`;
65+
66+
}
67+
68+
//在hero范围内监听鼠标移动事件
69+
hero.addEventListener('mousemove', shadowMove);
70+
</script>
71+
</body>
72+
</html>

‎16 - Mouse Move Shadow/index-start.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mouse Shadow</title>
6+
</head>
7+
<body>
8+
9+
<div class="hero">
10+
<h1 contenteditable>🔥WOAH!</h1>
11+
</div>
12+
13+
<style>
14+
html {
15+
color:black;
16+
font-family: sans-serif;
17+
}
18+
19+
body {
20+
margin: 0;
21+
}
22+
23+
.hero {
24+
min-height: 100vh;
25+
display:flex;
26+
justify-content: center;
27+
align-items: center;
28+
color:black;
29+
}
30+
31+
h1 {
32+
text-shadow: 10px 10px 0 rgba(0,0,0,1);
33+
font-size: 100px;
34+
}
35+
</style>
36+
37+
<script>
38+
</script>
39+
</body>
40+
</html>

‎16 - Mouse Move Shadow/style.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@charset "UTF-8";
2+
/**
3+
* @dashrun (@389399428@qq.com)
4+
* @date 2017-08-20
5+
* @version $1.0
6+
*/

‎17 - Sort Without Articles/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# 17 数组的去前缀排序
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 17 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-08-23
8+
最后更新：2017-08-24
9+
10+
## 挑战任务
11+
初始文件`index-start.html`中提供了一个无序列表元素，并在`script`标签中提供了一个字符串数组。请为这些字符串排序，要求去除字符串中的`The`，`A`以及`An`的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。
12+
13+
## 实现效果
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day17-SortWithoutArticles/effects.png)
15+
16+
## 基本思路
17+
1.基本的编程任务有两个要点，即**排序**和**展示**;<br>
18+
2.数组排序部分最外层即为`Array.sort(arr)`函数，内层实现具体排序规则;<br>
19+
3.展示部分即将排列好的新数组拼接成带有标签的HTML元素，然后一次性插入到列表中。
20+
21+
## 过程指南(以非ES6版本为例)
22+
1.声明去前缀函数，使用`String.replace()`函数实现，第一参数使用字面量正则表达式。
23+
```js
24+
function delPrefix(item){
25+
return item.replace(/^(The|A|An)\s{1}/,'');
26+
}
27+
```
28+
2.使用`Array.sort()`对数组进行排序，将数组中逐项使用`delPrefix()`去掉前缀后再进行对比。
29+
```js
30+
var sortedbands = bands.sort(function(a,b){
31+
return delPrefix(a) > delPrefix(b) ? 1 : -1;
32+
});
33+
```
34+
3.使用选择器选中无序列表`#bands`，将排序后的数组作为列表项插入其中。
35+
```js
36+
document.getElementById('bands').innerHTML = '<li>'+arr.join('</li><li>')+'</li>';
37+
```
38+
39+
## 细节知识点
40+
1.`Array.prototype.sort(*param*)`方法虽然有返回值，但排序结果也影响原数组，在非ES6版本的代码中，我们使用了指向原数组的变量`bands`,而在ES6版本的代码中将排序后的结果赋值给了新的变量sortedbands，从结果可以看出，两者达到了相同的目的。
41+
42+
2.在ES6版本的代码结尾处，我们修改原数组`bands`中的第一项，并在控制台打印出排序后的数组`sortedbands`，从结果可以看出`sortedbands`也受到了影响，由此可以看出`Array.prototype.sort()`函数只是返回了一个指向原数组的引用，而并没有生成新的数组。

‎17 - Sort Without Articles/effects.png

852 KB
Loading

‎17 - Sort Without Articles/index-finished-Dashrun-es5.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sort Without Articles-es5</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
body {
11+
margin: 0;
12+
font-family: sans-serif;
13+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
14+
background-size: cover;
15+
display: flex;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
20+
#bands {
21+
list-style: inside square;
22+
font-size: 20px;
23+
background: white;
24+
width: 500px;
25+
margin: auto;
26+
padding: 0;
27+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
28+
}
29+
#bands li {
30+
border-bottom: 1px solid #efefef;
31+
padding: 20px;
32+
}
33+
#bands li:last-child {
34+
border-bottom: 0;
35+
}
36+
37+
a {
38+
color: #ffc600;
39+
text-decoration: none;
40+
}
41+
42+
</style>
43+
44+
<ul id="bands"></ul>
45+
46+
<script>
47+
//当前版本未使用ES6新语法
48+
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
49+
50+
//去前缀函数
51+
function delPrefix(item){
52+
return item.replace(/^(The|A|An)\s{1}/,'');
53+
}
54+
55+
//展示至HTML页面
56+
function displayArray(arr){
57+
/*
58+
*此处使用document.createElement()及appendChild()可达到相同的，
59+
*本例中采用的方法减少了更改DOM现场的次数，可以提高性能
60+
*/
61+
document.getElementById('bands').innerHTML = '<li>'+arr.join('</li><li>')+'</li>';
62+
}
63+
64+
//按要求排序
65+
bands.sort(function(a,b){
66+
return delPrefix(a) > delPrefix(b) ? 1 : -1;
67+
});
68+
69+
displayArray(bands);
70+
71+
</script>
72+
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)