Skip to content

Commit fbb84c1

Browse files
soyainesoyaine
authored
Merge pull request soyaine#27 from dashrun/master
2 parents c3b9a1a + f204f30 commit fbb84c1

File tree

7 files changed

+270
-31
lines changed

7 files changed

+270
-31
lines changed

‎19 - Webcam Fun/script.js

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,50 @@ window.onload = function() {
77
a = document.querySelector('a');
88
//滤色范围记录
99
filter = {
10-
rmin:0,
11-
rmax:255,
12-
gmin:0,
13-
gmax:255,
14-
bmin:0,
15-
bmax:255
10+
rmin: 0,
11+
rmax: 255,
12+
gmin: 0,
13+
gmax: 255,
14+
bmin: 0,
15+
bmax: 255
1616
}
1717

1818
//调用摄像头数据
19-
askWebcam();
19+
askWebcam();
2020

2121
//绑定change事件动态修改图片颜色
2222
slider.onchange = function(e) {
2323
//先将canvas恢复至原始截图
24-
ctx.putImageData(origindata,0,0);
24+
ctx.putImageData(origindata, 0, 0);
2525
const target = e.target;
2626
//startPos表示操作像素点数据时的起点，从canvas获取到的像素数据每四个值表示一个像素点
2727
//例如滑块为红色，则只需要改变像素数组中第0,4,8......个元素的值。
28-
const startPos = {'r':0,'g':1,'b':2}[target.name[0]];
28+
const startPos = {
29+
'r': 0,
30+
'g': 1,
31+
'b': 2
32+
}[target.name[0]];
2933
//filterMin和filterMax表示相应的滤色范围上下限，若修改了红色滤色范围则取红色范围值。
3034
//若修改蓝色的滤色范围，则取蓝色。
3135
var tempFilter = checkFilter(target.name, target.value);
3236
const filterMin = tempFilter.min;
3337
const filterMax = tempFilter.max;
3438
//从canvas获取像素数据
35-
var img = ctx.getImageData(0,0,300,200);
39+
var img = ctx.getImageData(0, 0, 300, 200);
3640

3741

38-
var imgd = img.data;
39-
//色彩过滤
40-
for(var i=startPos, len = imgd.length; i<len ; i+=4){
41-
if (imgd[i]< filterMin){
42+
var imgd = img.data;
43+
//色彩过滤
44+
for (var i = startPos, len = imgd.length; i < len; i += 4) {
45+
if (imgd[i] < filterMin) {
4246
imgd[i] = filterMin;
43-
}else if(imgd[i] >filterMax){
47+
} else if (imgd[i] > filterMax) {
4448
imgd[i] = filterMax;
4549
}
46-
}
47-
//将修改后的像素数据重绘制至canvas
48-
ctx.putImageData(img,0,0);
49-
img.src = canvas.toDataURL();
50+
}
51+
//将修改后的像素数据重绘制至canvas
52+
ctx.putImageData(img, 0, 0);
53+
img.src = canvas.toDataURL();
5054
}
5155

5256
}
@@ -55,7 +59,7 @@ window.onload = function() {
5559
function takePhoto() {
5660
ctx.drawImage(video, 0, 0, 300, 200);
5761
//将原始截图保存
58-
origindata = ctx.getImageData(0,0,300,200);
62+
origindata = ctx.getImageData(0, 0, 300, 200);
5963
}
6064

6165
//保存图片
@@ -67,7 +71,7 @@ function savePhoto() {
6771

6872
//申请网络摄像头操作权限
6973
function askWebcam() {
70-
navigator.getUserMedia = navigator.getUserMedia ||
74+
navigator.getUserMedia = navigator.getUserMedia ||
7175
navigator.webkitGetUserMedia ||
7276
navigator.mozGetUserMedia;
7377
if (navigator.getUserMedia) {
@@ -92,17 +96,24 @@ function askWebcam() {
9296
}
9397

9498
//滤色函数
95-
function checkFilter(name, value){
96-
var _min;
97-
var _max;
98-
var _antiname = {'rmin':'rmax','rmax':'rmin','gmin':'gmax','gmax':'gmin','bmin':'bmax','bmax':'bmin'}[name]
99+
function checkFilter(name, value) {
100+
var _min;
101+
var _max;
102+
var _antiname = {
103+
'rmin': 'rmax',
104+
'rmax': 'rmin',
105+
'gmin': 'gmax',
106+
'gmax': 'gmin',
107+
'bmin': 'bmax',
108+
'bmax': 'bmin'
109+
}[name]
99110
filter[name] = value;
100111
//当下限值超过上限时，将两者对调
101-
_min = Math.min(filter[name],filter[_antiname]);
102-
_max = Math.max(filter[name],filter[_antiname]);
112+
_min = Math.min(filter[name], filter[_antiname]);
113+
_max = Math.max(filter[name], filter[_antiname]);
103114
console.log(filter);
104115
return {
105116
min: _min,
106117
max: _max
107118
}
108-
}
119+
}

‎22 - Follow Along Link Highlighter/README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# 22 Follow Along Link Highliter 中文指南
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-09-12
8+
最后更新：2017-09-16
9+
10+
## 挑战任务
11+
初始文档`index-start.html`提供了一组使用`<ul>`及`<li>`标签包裹的导航标签。本次的编程挑战任务是完成如下动画效果：当鼠标移动至某个对应标签上时，为标签添加一个白色的背景框，高亮表示该标签被选中，当鼠标移动至其他标签后，白色背景框不消失，而是直接跟随鼠标平移至新的标签，实现效果见下图展示。
12+
13+
## 实现效果
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/effects.gif)
15+
16+
17+
## 相关知识
18+
`Element.getBoundingClientRect()`
19+
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
20+
返回值是一个`DOMRect`对象，这个对象是由该元素的`getClientRects()`方法返回的一组矩形的集合, 即：是与该元素相关的CSS边框集合。`DOMRect` 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
21+
DOMRect相关属性:
22+
23+
Attribute | Type | Description
24+
--- | --- | ---
25+
bottom | float | Y 轴，相对于视口原点（viewport origin）矩形盒子的底部。只读。
26+
height | float | 矩形盒子的高度（等同于 bottom 减 top）。只读。
27+
left | float | X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。只读。
28+
right | float | X 轴，相对于视口原点（viewport origin）矩形盒子的右侧。只读。
29+
top | float | Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。只读。
30+
width | float | 矩形盒子的宽度（等同于 right 减 left）。只读。
31+
x | float | X轴横坐标，矩形盒子左边相对于视口原点（viewport origin）的距离。只读。
32+
y | float | Y轴纵坐标，矩形盒子顶部相对于视口原点（viewport origin）的距离。只读。
33+
34+
## 编程思路
35+
1.生成一个绝对定位的块元素，在后续改变其`top`及`left`坐标值移动至对应标签处，来呈现不同标签被激活的效果;
36+
2.鼠标移动至`<li>`标签后，使用`Element.getBoundingClientRect()方法`获得该标签的位置信息;
37+
3.将获得的`<li>`的`top`及`left`值赋给绝对定位块元素，使其移动至被激活的标签，位于标签文字下方。
38+
39+
## 过程指南
40+
1.生成绝对定位块元素
41+
```js
42+
var activeBackground = document.createElement('span');
43+
activeBackground.setAttribute('class','highlight');
44+
document.body.appendChild(activeBackground);
45+
46+
//避免第一次激活时跳动,如果没有此句，可以看到第一次标签被激活时，块元素会从左上角移动至对应标签处。
47+
activeBackground.style.display = 'none';
48+
```
49+
2.使用`Element.getBoundingClientRect()方法`获得对应标签的位置信息
50+
```js
51+
function lightOn(e){
52+
var activeLink = e.target.getBoundingClientRect();
53+
var coords = {
54+
height:activeLink.height,
55+
width:activeLink.width,
56+
left:window.pageXOffset + activeLink.left,
57+
top: window.pageYOffset + activeLink.top
58+
}
59+
activeBackground.style.height = `${coords.height}px`;
60+
activeBackground.style.width = `${coords.width}px`;
61+
activeBackground.style.left = `${coords.left}px`;
62+
activeBackground.style.top = `${coords.top}px`;
63+
activeBackground.style.display = 'inline';
64+
}
65+
```
66+
3.将点亮函数与标签的鼠标移入事件绑定
67+
```js
68+
//监听鼠标移入事件及鼠标移出事件
69+
for(var i = 0; i < len; i++){
70+
oLi[i].onmouseenter = lightOn;
71+
}
72+
```
73+
74+

‎22 - Follow Along Link Highlighter/effects.gif

214 KB
Loading

‎22 - Follow Along Link Highlighter/index-finished-Dashrun.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>👀👀👀Follow Along Nav</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<nav>
11+
<ul class="menu" id="menu">
12+
<li><a href="" >Home</a></li>
13+
<li><a href="">Order Status</a></li>
14+
<li><a href="">Tweets</a></li>
15+
<li><a href="">Read Our History</a></li>
16+
<li><a href="">Contact Us</a></li>
17+
</ul>
18+
</nav>
19+
20+
<div class="wrapper">
21+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
22+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
23+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
24+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
25+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
26+
</div>
27+
28+
<script>
29+
var oLi = document.getElementsByTagName('li');
30+
var len = oLi.length;
31+
var activeBackground = document.createElement('span');
32+
activeBackground.setAttribute('class','highlight');
33+
document.body.appendChild(activeBackground);
34+
35+
//避免第一次激活时跳动
36+
activeBackground.style.display = 'none';
37+
38+
39+
//监听鼠标移入事件及鼠标移出事件
40+
for(var i = 0; i < len; i++){
41+
oLi[i].onmouseenter = lightOn;
42+
}
43+
44+
//鼠标
45+
function lightOn(e){
46+
var activeLink = e.target.getBoundingClientRect();
47+
var coords = {
48+
height:activeLink.height,
49+
width:activeLink.width,
50+
left:window.pageXOffset + activeLink.left,
51+
top: window.pageYOffset + activeLink.top
52+
}
53+
activeBackground.style.height = `${coords.height}px`;
54+
activeBackground.style.width = `${coords.width}px`;
55+
activeBackground.style.left = `${coords.left}px`;
56+
activeBackground.style.top = `${coords.top}px`;
57+
activeBackground.style.display = 'inline';
58+
}
59+
</script>
60+
</body>
61+
</html>
62+

‎22 - Follow Along Link Highlighter/index-start.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>👀👀👀Follow Along Nav</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<nav>
11+
<ul class="menu">
12+
<li><a href="">Home</a></li>
13+
<li><a href="">Order Status</a></li>
14+
<li><a href="">Tweets</a></li>
15+
<li><a href="">Read Our History</a></li>
16+
<li><a href="">Contact Us</a></li>
17+
</ul>
18+
</nav>
19+
20+
<div class="wrapper">
21+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
22+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
23+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
24+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
25+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
26+
</div>
27+
28+
<script>
29+
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
30+
</script>
31+
</body>
32+
</html>
33+

‎22 - Follow Along Link Highlighter/style.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
*, *:before, *:after {
5+
box-sizing: inherit;
6+
}
7+
body {
8+
min-height: 100vh;
9+
margin: 0; /* Important! */
10+
font-family: sans-serif;
11+
background:
12+
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
13+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
14+
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
15+
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
16+
}
17+
18+
.wrapper {
19+
margin:0 auto;
20+
max-width:500px;
21+
font-size: 20px;
22+
line-height: 2;
23+
position: relative;
24+
}
25+
26+
a {
27+
text-decoration: none;
28+
color:black;
29+
background:rgba(0,0,0,0.05);
30+
border-radius: 20px
31+
}
32+
33+
.highlight {
34+
transition: all 0.2s;
35+
border-bottom:2px solid white;
36+
position: absolute;
37+
top:0;
38+
background:white;
39+
left:0;
40+
z-index: -1;
41+
border-radius:20px;
42+
display: block;
43+
box-shadow: 0 0 10px rgba(0,0,0,0.2)
44+
}
45+
46+
.menu {
47+
padding: 0;
48+
display: flex;
49+
list-style: none;
50+
justify-content: center;
51+
margin:100px 0;
52+
}
53+
54+
.menu a {
55+
display: inline-block;
56+
padding:5px;
57+
margin:0 20px;
58+
color:black;
59+
}

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# JavaScript30 - 一个月纯 JS 挑战中文指南
22

33
创建日期：2016-12-20
4-
最后更新：2017-09-04
4+
最后更新：2017-09-16
55

66
> Repo by: [缉熙Soyaine](https://github.com/soyaine)
77
> [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)
@@ -60,7 +60,7 @@ No | Guide | Demo
6060
18 | [Adding Up Times with Reduce 指南](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce) | [使用 Reduce 进行时间叠加效果](https://soyaine.github.io/JavaScript30/18%20-%20AddingUpTimesWithReduce/index-finished-Dashrun-es6.html)
6161
19 | [Webcam Fun 指南](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/README.md) | [网络摄像头及图片处理在线效果](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/index-finished-Dashrun.html)
6262
20 | [Speech Detection指南](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/README.md) | [Speech Detection效果](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/index-finished-Dashrun.html)
63-
21 | Geolocation | -
63+
21 | [Geolocation指南](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/README.md) | [Geolocation效果](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/index-finished-Dashrun.html)
6464
22 | Follow Along Link Highlighter | -
6565
23 | Speech Synthesis | -
6666
24 | Sticky Nav | -
@@ -80,7 +80,7 @@ Name | Contribution
8080
[@DrakeXiang](https://github.com/DrakeXiang) | No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
8181
[@zzh466](http://github.com/zzh466) | Review
8282
[@Xing Liu](https://github.com/S1ngS1ng) | Review
83-
[@大史快跑Dashrun](https://github.com/dashrun) | No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection)
83+
[@大史快跑Dashrun](https://github.com/dashrun) | No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation)
8484
[@缉熙Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
8585

8686
## JOIN US

0 commit comments

Comments
 (0)