try to finish the work of day16 (soyaine#20) by dashrun

dashnowords · soyaine · commit fdbf02e9973b · 2017-08-25T11:03:24.000+09:00
* try to finish the work of day16

* modify some details to improve the performance of readme.md as asked
diff --git a/day16 - mouseMoveShadow/README.md b/day16 - mouseMoveShadow/README.md
@@ -0,0 +1,55 @@
+# 16 文字阴影的鼠标随动效果
+
+> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
+
+> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 16 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
+
+> 创建时间：2017-08-20    
+最后更新：2017-08-21
+
+## 挑战任务
+   初始文件`index-start.html`中提供了一个包含了`h1`元素的`div`元素，`h1`元素已经设置了`text-Shadow`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。
+
+## 实现效果
+![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day16-mouseMoveShadow/effects.png)
+
+## 基本知识
+`text-shadow`样式为标准CSS3样式，用于添加**一个或多个**文字阴影，用于其的语法格式为：
+```css
+text-shadow: h-shadow v-shadow blur color
+
+```
+
+## 过程指南
+1.在`script`标签中，我们使用3个变量，一个指向`div`元素，一个指向其子元素`h1`，最后一个变量`factor`用于标记阴影距离`h1`中心的距离和鼠标距离`h1`中心距离的比例，用于计算阴影的具体位置。
+
+2.在`hero`元素上监听鼠标移动事件`mousemove`，并添加事件处理的回调函数`shadowMove`.
+```js
+hero.addEventListener('mousemove',shadowMove);
+```
+
+3.为获得第一个阴影的瞬时位置，需要通过鼠标位置距离`h1`中心的距离乘以`factor`系数来获得，`pos`表示鼠标当前位置的坐标,range指代`hero`元素的宽和高：
+```js
+    var disX = parseInt((pos.x-range.x/2)*factor);
+    var disY = parseInt((pos.y-range.y/2)*factor);
+```
+4.从事件发生的event对象中获取需要的值：
+```js
+    var range = {
+      x:hero.offsetWidth,
+      y:hero.offsetHeight
+    }
+    var pos = {
+      x:e.target.offsetLeft+e.offsetX,
+      y:e.target.offsetTop+e.offsetY
+    }
+```
+5.计算出`h1`元素第一个阴影位置后，可以以坐标镜像或旋转90°等不同的方式来生成其他阴影，本例中我们采用绕`h1`元素中心旋转90°的方式共生成4个阴影：
+```js
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+    `;
+```
diff --git a/day16 - mouseMoveShadow/effects.png b/day16 - mouseMoveShadow/effects.png
diff --git a/day16 - mouseMoveShadow/index-finished-es5.html b/day16 - mouseMoveShadow/index-finished-es5.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Mouse Shadow-ES5</title>
+</head>
+<body>
+
+  <div class="hero">
+    <h1 contenteditable>🔥WOAH!</h1>
+  </div>
+<!--CSS part-->
+  <style>
+  html {
+    color:black;
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .hero {
+    min-height: 100vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    color:black;
+  }
+
+  h1 {
+    text-shadow: 10px 10px 0 rgba(0,0,0,1);
+    font-size: 100px;
+  }
+  </style>
+<!--Js part-->
+<script>
+var hero = document.querySelector('.hero');
+var text = hero.querySelector('h1');
+var factor = 0.4;//当鼠标移动至显示区域边界时，阴影距离占hero元素宽和高的比例
+//在div范围内监听
+hero.addEventListener('mousemove',shadowMove);
+
+//文字阴影效果及移动函数
+function shadowMove(e){
+    var range = {
+      x:hero.offsetWidth,
+      y:hero.offsetHeight
+    }
+    var pos = {
+      x:e.target.offsetLeft+e.offsetX,
+      y:e.target.offsetTop+e.offsetY
+    }
+    //计算阴影移动距离
+    var disX = parseInt((pos.x-range.x/2)*factor);
+    var disY = parseInt((pos.y-range.y/2)*factor);
+    //修改阴影样式
+    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';
+}
+</script>
+</body>
+</html>
diff --git a/day16 - mouseMoveShadow/index-finished-es6.html b/day16 - mouseMoveShadow/index-finished-es6.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Mouse Shadow</title>
+</head>
+<body>
+
+  <div class="hero">
+    <h1 contenteditable>🔥WOAH!</h1>
+  </div>
+
+  <style>
+  html {
+    color:black;
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .hero {
+    min-height: 100vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    color:black;
+  }
+
+
+  h1 {
+    text-shadow: 10px 10px 0 rgba(0,0,0,1);
+    font-size: 100px;
+  }
+  </style>
+
+<script>
+ //高级选择器
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const factor = 0.4; //当鼠标移动至显示区域边界时，阴影距离占hero元素宽和高的比例
+
+  function shadowMove(e) {
+    //解构赋值
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let { offsetX: x, offsetY: y } = e;
+    
+    //将鼠标位置转换为相对视口左上角的坐标，本例中由于hero元素占满视口故未起实际作用
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    const xWalk = parseInt((x-width/2)*factor);
+    const yWalk = parseInt((y-height/2)*factor);
+
+    //使用模板字符串赋值
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+    `;
+
+  }
+
+//在hero范围内监听鼠标移动事件
+  hero.addEventListener('mousemove', shadowMove);
+</script>
+</body>
+</html>
diff --git a/day16 - mouseMoveShadow/index-start.html b/day16 - mouseMoveShadow/index-start.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Mouse Shadow</title>
+</head>
+<body>
+
+  <div class="hero">
+    <h1 contenteditable>🔥WOAH!</h1>
+  </div>
+
+  <style>
+  html {
+    color:black;
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .hero {
+    min-height: 100vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    color:black;
+  }
+
+  h1 {
+    text-shadow: 10px 10px 0 rgba(0,0,0,1);
+    font-size: 100px;
+  }
+  </style>
+
+<script>
+</script>
+</body>
+</html>
diff --git a/day16 - mouseMoveShadow/style.css b/day16 - mouseMoveShadow/style.css
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+/**
+ * @dashrun (@389399428@qq.com)
+ * @date    2017-08-20
+ * @version $1.0
+ */
