Skip to content

完成了day22部分 麻烦review一下 #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
soyaine merged 1 commit into from
Sep 16, 2017
Merged

完成了day22部分 麻烦review一下 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 39 additions & 28 deletions 19 - Webcam Fun/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,50 @@ window.onload = function() {
a = document.querySelector('a');
//滤色范围记录
filter = {
rmin:0,
rmax:255,
gmin:0,
gmax:255,
bmin:0,
bmax:255
rmin: 0,
rmax: 255,
gmin: 0,
gmax: 255,
bmin: 0,
bmax: 255
}

//调用摄像头数据
askWebcam();
askWebcam();

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


var imgd = img.data;
//色彩过滤
for(var i=startPos, len = imgd.length; i<len ; i+=4){
if (imgd[i]< filterMin){
var imgd = img.data;
//色彩过滤
for (var i = startPos, len = imgd.length; i < len; i += 4) {
if (imgd[i] < filterMin) {
imgd[i] = filterMin;
}else if(imgd[i] >filterMax){
} else if (imgd[i] > filterMax) {
imgd[i] = filterMax;
}
}
//将修改后的像素数据重绘制至canvas
ctx.putImageData(img,0,0);
img.src = canvas.toDataURL();
}
//将修改后的像素数据重绘制至canvas
ctx.putImageData(img, 0, 0);
img.src = canvas.toDataURL();
}

}
Expand All @@ -55,7 +59,7 @@ window.onload = function() {
function takePhoto() {
ctx.drawImage(video, 0, 0, 300, 200);
//将原始截图保存
origindata = ctx.getImageData(0,0,300,200);
origindata = ctx.getImageData(0, 0, 300, 200);
}

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

//申请网络摄像头操作权限
function askWebcam() {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
Expand All @@ -92,17 +96,24 @@ function askWebcam() {
}

//滤色函数
function checkFilter(name, value){
var _min;
var _max;
var _antiname = {'rmin':'rmax','rmax':'rmin','gmin':'gmax','gmax':'gmin','bmin':'bmax','bmax':'bmin'}[name]
function checkFilter(name, value) {
var _min;
var _max;
var _antiname = {
'rmin': 'rmax',
'rmax': 'rmin',
'gmin': 'gmax',
'gmax': 'gmin',
'bmin': 'bmax',
'bmax': 'bmin'
}[name]
filter[name] = value;
//当下限值超过上限时，将两者对调
_min = Math.min(filter[name],filter[_antiname]);
_max = Math.max(filter[name],filter[_antiname]);
_min = Math.min(filter[name], filter[_antiname]);
_max = Math.max(filter[name], filter[_antiname]);
console.log(filter);
return {
min: _min,
max: _max
}
}
}
74 changes: 74 additions & 0 deletions 22 - Follow Along Link Highlighter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# 22 Follow Along Link Highliter 中文指南

> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer

> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)

> 创建时间：2017-09-12
最后更新：2017-09-16

## 挑战任务
初始文档`index-start.html`提供了一组使用`<ul>`及`<li>`标签包裹的导航标签。本次的编程挑战任务是完成如下动画效果：当鼠标移动至某个对应标签上时，为标签添加一个白色的背景框，高亮表示该标签被选中，当鼠标移动至其他标签后，白色背景框不消失，而是直接跟随鼠标平移至新的标签，实现效果见下图展示。

## 实现效果
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/effects.gif)


## 相关知识
`Element.getBoundingClientRect()`
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
返回值是一个`DOMRect`对象，这个对象是由该元素的`getClientRects()`方法返回的一组矩形的集合, 即：是与该元素相关的CSS边框集合。`DOMRect` 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
DOMRect相关属性:

Attribute | Type | Description
--- | --- | ---
bottom | float | Y 轴，相对于视口原点（viewport origin）矩形盒子的底部。只读。
height | float | 矩形盒子的高度（等同于 bottom 减 top）。只读。
left | float | X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。只读。
right | float | X 轴，相对于视口原点（viewport origin）矩形盒子的右侧。只读。
top | float | Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。只读。
width | float | 矩形盒子的宽度（等同于 right 减 left）。只读。
x | float | X轴横坐标，矩形盒子左边相对于视口原点（viewport origin）的距离。只读。
y | float | Y轴纵坐标，矩形盒子顶部相对于视口原点（viewport origin）的距离。只读。

## 编程思路
1.生成一个绝对定位的块元素，在后续改变其`top`及`left`坐标值移动至对应标签处，来呈现不同标签被激活的效果;
2.鼠标移动至`<li>`标签后，使用`Element.getBoundingClientRect()方法`获得该标签的位置信息;
3.将获得的`<li>`的`top`及`left`值赋给绝对定位块元素，使其移动至被激活的标签，位于标签文字下方。

## 过程指南
1.生成绝对定位块元素
```js
var activeBackground = document.createElement('span');
activeBackground.setAttribute('class','highlight');
document.body.appendChild(activeBackground);

//避免第一次激活时跳动,如果没有此句，可以看到第一次标签被激活时，块元素会从左上角移动至对应标签处。
activeBackground.style.display = 'none';
```
2.使用`Element.getBoundingClientRect()方法`获得对应标签的位置信息
```js
function lightOn(e){
var activeLink = e.target.getBoundingClientRect();
var coords = {
height:activeLink.height,
width:activeLink.width,
left:window.pageXOffset + activeLink.left,
top: window.pageYOffset + activeLink.top
}
activeBackground.style.height = `${coords.height}px`;
activeBackground.style.width = `${coords.width}px`;
activeBackground.style.left = `${coords.left}px`;
activeBackground.style.top = `${coords.top}px`;
activeBackground.style.display = 'inline';
}
```
3.将点亮函数与标签的鼠标移入事件绑定
```js
//监听鼠标移入事件及鼠标移出事件
for(var i = 0; i < len; i++){
oLi[i].onmouseenter = lightOn;
}
```


Binary file added 22 - Follow Along Link Highlighter/effects.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions 22 - Follow Along Link Highlighter/index-finished-Dashrun.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>👀👀👀Follow Along Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<ul class="menu" id="menu">
<li><a href="" >Home</a></li>
<li><a href="">Order Status</a></li>
<li><a href="">Tweets</a></li>
<li><a href="">Read Our History</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>

<div class="wrapper">
<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>
<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>
<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>
<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>
<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>
</div>

<script>
var oLi = document.getElementsByTagName('li');
var len = oLi.length;
var activeBackground = document.createElement('span');
activeBackground.setAttribute('class','highlight');
document.body.appendChild(activeBackground);

//避免第一次激活时跳动
activeBackground.style.display = 'none';


//监听鼠标移入事件及鼠标移出事件
for(var i = 0; i < len; i++){
oLi[i].onmouseenter = lightOn;
}

//鼠标
function lightOn(e){
var activeLink = e.target.getBoundingClientRect();
var coords = {
height:activeLink.height,
width:activeLink.width,
left:window.pageXOffset + activeLink.left,
top: window.pageYOffset + activeLink.top
}
activeBackground.style.height = `${coords.height}px`;
activeBackground.style.width = `${coords.width}px`;
activeBackground.style.left = `${coords.left}px`;
activeBackground.style.top = `${coords.top}px`;
activeBackground.style.display = 'inline';
}
</script>
</body>
</html>

33 changes: 33 additions & 0 deletions 22 - Follow Along Link Highlighter/index-start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>👀👀👀Follow Along Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Order Status</a></li>
<li><a href="">Tweets</a></li>
<li><a href="">Read Our History</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>

<div class="wrapper">
<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>
<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>
<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>
<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>
<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>
</div>

<script>
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
</script>
</body>
</html>

59 changes: 59 additions & 0 deletions 22 - Follow Along Link Highlighter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
margin: 0; /* Important! */
font-family: sans-serif;
background:
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}

.wrapper {
margin:0 auto;
max-width:500px;
font-size: 20px;
line-height: 2;
position: relative;
}

a {
text-decoration: none;
color:black;
background:rgba(0,0,0,0.05);
border-radius: 20px
}

.highlight {
transition: all 0.2s;
border-bottom:2px solid white;
position: absolute;
top:0;
background:white;
left:0;
z-index: -1;
border-radius:20px;
display: block;
box-shadow: 0 0 10px rgba(0,0,0,0.2)
}

.menu {
padding: 0;
display: flex;
list-style: none;
justify-content: center;
margin:100px 0;
}

.menu a {
display: inline-block;
padding:5px;
margin:0 20px;
color:black;
}
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# JavaScript30 - 一个月纯 JS 挑战中文指南

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

> Repo by: [缉熙Soyaine](https://github.com/soyaine)
> [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)
Expand Down Expand Up @@ -60,7 +60,7 @@ No | Guide | Demo
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)
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)
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)
21 | Geolocation | -
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)
22 | Follow Along Link Highlighter | -
23 | Speech Synthesis | -
24 | Sticky Nav | -
Expand All @@ -80,7 +80,7 @@ Name | Contribution
[@DrakeXiang](https://github.com/DrakeXiang) | No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
[@zzh466](http://github.com/zzh466) | Review
[@Xing Liu](https://github.com/S1ngS1ng) | Review
[@大史快跑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)
[@大史快跑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)
[@缉熙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)

## JOIN US
Expand Down