书：Web开发权威指南，[美] Chris Aquino, Todd Gandee著。为1st实战项目Ottergram练习以及代码整理。全为个人借鉴本书产出，若需要转载请联系通知我，谢谢~
最终成果展示
第一章 配置开发环境
文档与参考资料
DevDocs API Documentation：Mozilla开发者网络（MDN）是HTML、CSS和JavaScript最好的参考文档。
HTML5 Please - Use the new and shiny responsibly：查询特性支持程度，查询该特性是否被推荐使用
Can I use... Support tables for HTML5, CSS3, etc：了解浏览器的那些版本支持某一特性时。
常用命令行
命令行：
查看当前地址，windows：echo %cd% Mac,linux: pwd
创建目录：mkdir+目录名称
切换目录：cd+目录名称（若为..返回上机）
列出目录中的文件：ls（+目录名称）
获取管理员权限：sudo
退出指令：ctrl+c
Node.js和browser-sync
-
Node：自带功能node和npm
node：运行JavaScript程序
npm：在线安装开源开发工具
-
browser-sync：修改并保存代码时，浏览器会自动重新加载，启动后会一直运行直到ctrl+c才能退出，完成项目之后最好退出。
npm install -g browser-sync
第二章 开始第一个项目
代码展示
ottergram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ottergram</title>
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header>
<h1>ottergram</h1>
</header>
<ul>
<li>
<a href="#">
<img src="img/otter1.png" alt="Barry the Otter">
<span>Barry</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter2.png" alt="Robin the Otter">
<span>Robin</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter3.png" alt="Maurice the Otter">
<span>Maurice</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter4.png" alt="Lesley the Otter">
<span>Lesley</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter5.png" alt="Barbara the Otter">
<span>Barbara</span>
</a>
</li>
</ul>
</body>
</html>第三章 为HTML添加样式
nomalize.css
让CSS代码在不同的浏览器上表现一致（不同浏览器都有一组默认样式）。访问normalize - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers，找到以.min.css结尾的文件。
normalize.css托管在cdnjs.com上，这是一个公共服务器，是内容分发网络（Content Delivery Network, CDN）的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ottergram</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
....颜色工具
色輪、調色盤產生器 | Adobe Color：Adobe提供了一个免费的在线工具帮助完成配色
关系选择器
| 类别 | 样例 | 解释 |
|---|---|---|
| 后代选择器 | body span{/* style declarations */} | 可以匹配body所有的后代span元素 |
| 子选择器 | li > span{/* style declarations */} | 匹配所有父元素为li的span元素 |
| 兄弟选择器 | header ul{/* style declarations */} | 匹配所有位于header后面的ul元素 |
| 相邻兄弟选择器 | li + li{/* style declarations */} | 匹配近邻li元素之后的li元素 |
优先级
优先级 - CSS（层叠样式表） | MDN (mozilla.org)：优先级介绍
Specificity Calculator (keegan.st)：优先级计算器是一个计算不同选择器优先级的遍历工具。
代码展示
ottergram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ottergram</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header>
<h1 class="logo-text">ottergram</h1>
</header>
<ul class="thumbnail-list">
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
</body>
</html>styles.css
body {
font-size: 10px;
background: rgb(149, 194,215);
}
a {
text-decoration: none;
}
.logo-text {
background: white;
text-align: center;
text-transform: uppercase;
font-size: 37px;
}
.thumbnail-item + .thumbnail-item {
margin-top: 10px;
}
.thumbnail-item {
display: block;
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
.thumbnail-list {
list-style: none;
padding: 0;
}
.thumbnail-image {
width: 100%;
display: block;
}
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}第四章 flexbox响应式布局
代码展示
ottergram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ottergram</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header class="main-header">
<h1 class="logo-text">ottergram</h1>
</header>
<main class="main-content">
<ul class="thumbnail-list">
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
<div class="detail-image-container">
<div class="detail-image-frame">
<img class="detail-image" src="img/otter1.png" alt="">
<span class="detail-image-title">Stayin' Alive</span>
</div>
</div>
</main>
</body>
</html>styles.css
@font-face {
font-family: 'josefinsans';
src: url("fonts/JosefinSans-Bold.ttf");
font-weight: normal;
font-style: normal;
}
html, body {
height: 100%; /*高度设置为100%，允许内容填满浏览器或设备窗口*/
}
body {
display: flex; /*flex声明，将body变为flex容器*/
flex-direction: column; /*对调了flex容器的主轴和侧轴*/
font-size: 10px;
background: rgb(149, 194,215);
}
a {
text-decoration: none;
}
.main-header {
flex: 0 1 auto; /*无需进行拉伸，如有必要将会收缩，自动计算大小*/
}
.logo-text {
background: white;
text-align: center;
text-transform: uppercase;
font-size: 37px;
}
.main-content {
flex: 1 1 auto; /*第一个值对应flex-grow属性，值为1意味着会尽可能拉伸,flex: flex-grow flex-shrink flex-basis*/
display: flex;
flex-direction: column;
}
.thumbnail-item {
display: inline-block; /*元素盒子会如display: inline-block一般呈现，但不会产生换行*/
/*width: 120px;!*共同的父元素设置宽度，内部元素根据容器自适应*!*/
min-width:120px; /*修复图片尺寸不一致导致的布局问题*/
max-width:120px;
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
.thumbnail-list {
flex: 0 1 auto;
order: 2; /*使用源顺序，包括附属在内的其他值则告诉浏览器将该flex项目之余其他项目之前或之后*/
display: flex;
justify-content: space-between; /*决定flex容器如何控制flex项目在主轴方向上的绘制方式。使用space-between值，保证每个flex项目之间的空隙是相等的。*/
list-style: none;
padding: 0;
white-space: nowrap; /*声明禁止.thumbnail-item元素换行*/
overflow-x: auto; /*告诉浏览器，在.thumbnail-list元素的水平方向（X轴）上添加滚动，以容纳超出的部分，若没有此声明，则需要滚动整个页面方能看到超出部分*/
}
.thumbnail-image {
width: 100%;
display: block;
}
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}
.detail-image-container {
flex: 1 1 auto;
display: flex;
justify-content: center; /*使其flex项目沿主轴方向居中（在本例中，也就是默认的水平方向）。*/
align-items: center; /*使flex项目在侧轴方向（垂直方向)上居中*/
}
.detail-image-frame {
position: relative; /*既需要将它保留在常规文档流中，又需要它作为绝对定位元素的容器，因此position属性必须显示定义*/
text-align: center; /*无须flexbox即可实现的剧种方式，但只能是水平居中*/
}
.detail-image {
width: 90%;
}
.detail-image-title {
position: absolute;
bottom: -16px;
left: 4px;
font-family: josefinsans, serif;
color: white;
text-shadow: rgba(0,0,0,0.9) 1px 2px 9px; /*接收一个颜色值为阴影颜色，一个偏移量（决定阴影的上下左右位置），以及一个模糊半径值（该值是可选的，值越大则阴影越大，颜色越亮）*/
font-size: 40px;
}第五章 使用媒体查询完成自适应布局
延展阅读：flexbox布局通用解决方案
Solved by Flexbox — Cleaner, hack-free CSS (philipwalton.github.io)：该网站提供了用flexbox实现常见布局的demo以及创建他们所需的信息。不用flexbox的话，其中某些布局真的很难实现。
GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.：提供开发者使用flexbox时遇到的常见问题的解决方案和变通方法。这些信息有社区中遇到问题的开发者提供，列表也得到了很好的维护。
代码展示
ottergram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--告知浏览器布局视口的宽度与设备屏款相同。initial-scale值设为1，使页面缩放值为100%。有了meta元素后，就能够在这能收集这样的小屏幕上完整展示-->
<title>ottergram</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header class="main-header">
<h1 class="logo-text">ottergram</h1>
</header>
<main class="main-content">
<ul class="thumbnail-list">
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
<div class="detail-image-container">
<div class="detail-image-frame">
<img class="detail-image" src="img/otter1.png" alt="">
<span class="detail-image-title">Stayin' Alive</span>
</div>
</div>
</main>
</body>
</html>styles.css
@font-face {
font-family: 'josefinsans';
src: url("fonts/JosefinSans-Bold.ttf");
font-weight: normal;
font-style: normal;
}
html, body {
height: 100%; /*高度设置为100%，允许内容填满浏览器或设备窗口*/
}
body {
display: flex; /*flex声明，将body变为flex容器*/
flex-direction: column; /*对调了flex容器的主轴和侧轴*/
font-size: 10px;
background: rgb(149, 194,215);
}
a {
text-decoration: none;
}
.main-header {
flex: 0 1 auto; /*无需进行拉伸，如有必要将会收缩，自动计算大小*/
}
.logo-text {
background: white;
text-align: center;
text-transform: uppercase;
font-size: 37px;
}
.main-content {
flex: 1 1 auto; /*第一个值对应flex-grow属性，值为1意味着会尽可能拉伸,flex: flex-grow flex-shrink flex-basis*/
display: flex;
flex-direction: column;
}
.thumbnail-item {
display: inline-block; /*元素盒子会如display: inline-block一般呈现，但不会产生换行*/
/*width: 120px;!*共同的父元素设置宽度，内部元素根据容器自适应*!*/
min-width:120px; /*修复图片尺寸不一致导致的布局问题*/
max-width:120px;
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
.thumbnail-list {
flex: 0 1 auto;
order: 2; /*使用源顺序，包括附属在内的其他值则告诉浏览器将该flex项目之余其他项目之前或之后*/
display: flex;
justify-content: space-between; /*决定flex容器如何控制flex项目在主轴方向上的绘制方式。使用space-between值，保证每个flex项目之间的空隙是相等的。*/
list-style: none;
padding: 0;
white-space: nowrap; /*声明禁止.thumbnail-item元素换行*/
overflow-x: auto; /*告诉浏览器，在.thumbnail-list元素的水平方向（X轴）上添加滚动，以容纳超出的部分，若没有此声明，则需要滚动整个页面方能看到超出部分*/
}
.thumbnail-image {
width: 100%;
display: block;
}
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}
.detail-image-container {
flex: 1 1 auto;
display: flex;
justify-content: center; /*使其flex项目沿主轴方向居中（在本例中，也就是默认的水平方向）。*/
align-items: center; /*使flex项目在侧轴方向（垂直方向)上居中*/
}
.detail-image-frame {
position: relative; /*既需要将它保留在常规文档流中，又需要它作为绝对定位元素的容器，因此position属性必须显示定义*/
text-align: center; /*无须flexbox即可实现的剧种方式，但只能是水平居中*/
}
.detail-image {
width: 90%;
}
.detail-image-title {
position: absolute;
bottom: -16px;
left: 4px;
font-family: josefinsans, serif;
color: white;
text-shadow: rgba(0,0,0,0.9) 1px 2px 9px; /*接收一个颜色值为阴影颜色，一个偏移量（决定阴影的上下左右位置），以及一个模糊半径值（该值是可选的，值越大则阴影越大，颜色越亮）*/
font-size: 40px;
}
@media all and (min-width: 768px) { /*当设备宽度在768ox（通常是平板电脑的宽度）及以上是，我们新增的媒体查询样式就会生效*/
.main-content {
flex-direction: row;
overflow: hidden; /*不希望缩略图列表导致浏览器滚动，而是独立于浏览器窗口滚动*/
}
.thumbnail-list {
flex-direction: column;
order: 0; /*以前我们将order设置为2，使.thumbnail-list显示在.detail-image-container下方。现在，设为0，以便它遵循源顺序。*/
margin-left: 20px;
}
.thumbnail-item {
max-width: 250px;
}
.thumbnail-item + .thumbnail-item {
margin-top: 20px;
}
}第六章 Javascript事件处理
添加时间监听器
Event reference | MDN (mozilla.org)：完整的事件列表
严格模式
Strict mode - JavaScript | MDN (mozilla.org)：更多有关严格模式的内容
代码展示
ottergram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--告知浏览器布局视口的宽度与设备屏款相同。initial-scale值设为1，使页面缩放值为100%。有了meta元素后，就能够在这能收集这样的小屏幕上完整展示-->
<title>ottergram</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header class="main-header">
<h1 class="logo-text">ottergram</h1>
</header>
<main class="main-content">
<ul class="thumbnail-list">
<li class="thumbnail-item">
<a href="img/otter1.png" data-image-role="trigger"
data-image-title="Stayin' Alive"
data-image-url="img/otter1.png">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter2.png" data-image-role="trigger"
data-image-title="How Deep Is Your Love"
data-image-url="img/otter2.png">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter3.png" data-image-role="trigger"
data-image-title="You Should Be Dancing"
data-image-url="img/otter3.png">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter4.png" data-image-role="trigger"
data-image-title="Night Fever"
data-image-url="img/otter4.png">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter5.png" data-image-role="trigger"
data-image-title="To Love Somebody"
data-image-url="img/otter5.png">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter1.png" data-image-role="trigger"
data-image-title="Stayin' Alive"
data-image-url="img/otter1.png">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter2.png" data-image-role="trigger"
data-image-title="How Deep Is Your Love"
data-image-url="img/otter2.png">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter3.png" data-image-role="trigger"
data-image-title="You Should Be Dancing"
data-image-url="img/otter3.png">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter4.png" data-image-role="trigger"
data-image-title="Night Fever"
data-image-url="img/otter4.png">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter5.png" data-image-role="trigger"
data-image-title="To Love Somebody"
data-image-url="img/otter5.png">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
<div class="detail-image-container">
<div class="detail-image-frame">
<img class="detail-image" data-image-role="target" src="img/otter1.png" alt="">
<span class="detail-image-title" data-image-role="title">Stayin' Alive</span>
</div>
</div>
</main>
<script src="scripts/main.js" charset="UTF-8"></script>
</body>
</html>main.js
var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';
var DETAIL_TITLE_SELECTOR = '[data-image-role="title"]';
var THUMBNAIL_LINK_SELECTOR = '[data-image-role="trigger"]';
var otterOneImage = "img/otter1.png";
var otterOneTitle = "Stayin\' Alive";
function setDetails(imageUrl, titleText) {
'use strict';
var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); //获取大图的引用
detailImage.setAttribute('src', imageUrl); //传递两个字符串，属性名和新的值
var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
detailTitle.textContent = titleText; //指的是一个元素内部的文本（不包括HTML标签）
}
function imageFromThumb(thumbnail) {
'use strict';
return thumbnail.getAttribute('data-image-url');
}
function titleFromThumb(thumbnail) {
'use strict';
return thumbnail.getAttribute('data-image-title');
}
function setDetailsFromThumb(thumbnail) {
'use strict';
setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail)); //在setDetails真正被调用前，它的参数会先还原为最简单的值。
}
function addThumbClickHandler(thumb) { //回调函数的参数名不一定是event，最好使用描述性的名字
'use strict';
thumb.addEventListener('click', function(event) {
event.preventDefault(); //可以阻止链接让浏览器跳到另一个页面
setDetailsFromThumb(thumb);
});
}
function getThumbnailsArray() { //检索匹配THUMBNAIL_LINK_SELECTOR元素的结果，赋值给thumbnails变量
'use strict';
var thumbnails = document.querySelectorAll(THUMBNAIL_LINK_SELECTOR); //返回的是一个节点列表，不是数组
var thumbnailArray = [].slice.call(thumbnails); //将返回的节点列表转换为一个数组。将节点列表转为数组的向后兼容的方式
return thumbnailArray;
}
function initializeEvents() { //该方法会把所有步骤联系起来，从而具有交互性。首先获取缩略图数组，然后遍历整个数组，给其中每个元素添加点击事件处理程序
'use strict';
var thumbnails = getThumbnailsArray(); //将结果（缩略图数组）赋值给一个行为thumbnails的变量
thumbnails.forEach(addThumbClickHandler); //不是一个好办法，不过在目前这样做不会引发错误，addThumbClickHandler函数只需要在foreach函数调用它时传递他的信息（thumbnails数组中的一个元素）
}
initializeEvents();第七章 使用CSS营造视觉效果
变形
transform - CSS | MDN (mozilla.org)：可以用到很多其它的值，包括最新的3D效果，可以找到很好的说明。
使用定时函数
transition-timing-function - CSS | MDN (mozilla.org)：定时函数除了ease-in-out，还有很多可供使用的定时函数。
自定义定时函数
cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com：实用工具，自定义时间函数变得轻松愉快许多
延展阅读：强制类型转化的规则
相等比較 - JavaScript | MDN (mozilla.org)
代码展示
ottergram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--告知浏览器布局视口的宽度与设备屏款相同。initial-scale值设为1，使页面缩放值为100%。有了meta元素后，就能够在这能收集这样的小屏幕上完整展示-->
<title>ottergram</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<header class="main-header">
<h1 class="logo-text">ottergram</h1>
</header>
<main class="main-content">
<ul class="thumbnail-list">
<li class="thumbnail-item">
<a href="img/otter1.png" data-image-role="trigger"
data-image-title="Stayin' Alive"
data-image-url="img/otter1.png">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter2.png" data-image-role="trigger"
data-image-title="How Deep Is Your Love"
data-image-url="img/otter2.png">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter3.png" data-image-role="trigger"
data-image-title="You Should Be Dancing"
data-image-url="img/otter3.png">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter4.png" data-image-role="trigger"
data-image-title="Night Fever"
data-image-url="img/otter4.png">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter5.png" data-image-role="trigger"
data-image-title="To Love Somebody"
data-image-url="img/otter5.png">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter1.png" data-image-role="trigger"
data-image-title="Stayin' Alive"
data-image-url="img/otter1.png">
<img class="thumbnail-image" src="img/otter1.png" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter2.png" data-image-role="trigger"
data-image-title="How Deep Is Your Love"
data-image-url="img/otter2.png">
<img class="thumbnail-image" src="img/otter2.png" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter3.png" data-image-role="trigger"
data-image-title="You Should Be Dancing"
data-image-url="img/otter3.png">
<img class="thumbnail-image" src="img/otter3.png" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter4.png" data-image-role="trigger"
data-image-title="Night Fever"
data-image-url="img/otter4.png">
<img class="thumbnail-image" src="img/otter4.png" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="img/otter5.png" data-image-role="trigger"
data-image-title="To Love Somebody"
data-image-url="img/otter5.png">
<img class="thumbnail-image" src="img/otter5.png" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
<div class="detail-image-container">
<div class="detail-image-frame" data-image-role="frame">
<img class="detail-image" data-image-role="target" src="img/otter1.png" alt="">
<span class="detail-image-title" data-image-role="title">Stayin' Alive</span>
</div>
</div>
</main>
<script src="scripts/main.js" charset="UTF-8"></script>
</body>
</html>styles.css
@font-face {
font-family: 'josefinsans';
src: url("fonts/JosefinSans-Bold.ttf");
font-weight: normal;
font-style: normal;
}
html, body {
height: 100%; /*高度设置为100%，允许内容填满浏览器或设备窗口*/
}
body {
display: flex; /*flex声明，将body变为flex容器*/
flex-direction: column; /*对调了flex容器的主轴和侧轴*/
font-size: 10px;
background: rgb(149, 194,215);
}
a {
text-decoration: none;
}
.main-header {
flex: 0 1 auto; /*无需进行拉伸，如有必要将会收缩，自动计算大小*/
}
.logo-text {
background: white;
text-align: center;
text-transform: uppercase;
font-size: 37px;
}
.main-content {
flex: 1 1 auto; /*第一个值对应flex-grow属性，值为1意味着会尽可能拉伸,flex: flex-grow flex-shrink flex-basis*/
display: flex;
flex-direction: column;
}
.thumbnail-item {
display: inline-block; /*元素盒子会如display: inline-block一般呈现，但不会产生换行*/
/*width: 120px;!*共同的父元素设置宽度，内部元素根据容器自适应*!*/
min-width:120px; /*修复图片尺寸不一致导致的布局问题*/
max-width:120px;
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);
transition: transform 133ms ease-in-out; /*告诉浏览器这段样式变化要以动画形式来表现，并且动画的样式是transform。另外，代码中还指定了过度动画应该持续133毫秒。ease-in-out让过度动画的速度在开始和结束时较慢而中间较快*/
}
/*添加过渡效果*/
.thumbnail-item:hover { /*伪类:hover会在用户的鼠标悬停在某一元素上时与其匹配。*/
/*变形*/
transform: scale(1.2); /*告诉浏览器该元素需要显示为原尺寸的120%，还可以用到很多其它的值，包括最新的3D效果*/
}
.thumbnail-list {
flex: 0 1 auto;
order: 2; /*使用源顺序，包括附属在内的其他值则告诉浏览器将该flex项目之余其他项目之前或之后*/
display: flex;
justify-content: space-between; /*决定flex容器如何控制flex项目在主轴方向上的绘制方式。使用space-between值，保证每个flex项目之间的空隙是相等的。*/
list-style: none;
padding: 20px 0; /*使用了内边距的简写写法，前面的值:上内边距和下内边距的值，后面的值：左内边距和右内边距的值*/
white-space: nowrap; /*声明禁止.thumbnail-item元素换行*/
overflow-x: auto; /*告诉浏览器，在.thumbnail-list元素的水平方向（X轴）上添加滚动，以容纳超出的部分，若没有此声明，则需要滚动整个页面方能看到超出部分*/
}
.thumbnail-image {
width: 100%;
display: block;
}
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}
.detail-image-container {
flex: 1 1 auto;
display: flex;
justify-content: center; /*使其flex项目沿主轴方向居中（在本例中，也就是默认的水平方向）。*/
align-items: center; /*使flex项目在侧轴方向（垂直方向)上居中*/
}
.detail-image-frame {
position: relative; /*既需要将它保留在常规文档流中，又需要它作为绝对定位元素的容器，因此position属性必须显示定义*/
text-align: center; /*无须flexbox即可实现的剧种方式，但只能是水平居中*/
transition: transform 333ms cubic-bezier(.78,.1,.21,.89); /*这个值将从.is-tiny类的样式过渡到下一个样式的动画效果，即在三分之一秒内将大图放大到正常尺寸*/
}
.is-tiny { /*大图实际上是没有过度动画效果的，因为持续时间为0毫秒，没有表为其指定定时函数*/
transform: scale(0.001);
transition: transform 0ms;
}
.detail-image {
width: 90%;
}
.detail-image-title {
position: absolute;
bottom: -16px;
left: 4px;
font-family: josefinsans, serif;
color: white;
text-shadow: rgba(0,0,0,0.9) 1px 2px 9px; /*接收一个颜色值为阴影颜色，一个偏移量（决定阴影的上下左右位置），以及一个模糊半径值（该值是可选的，值越大则阴影越大，颜色越亮）*/
font-size: 40px;
}
.hidden-detail .detail-image-container { /*为了隐藏.detail-image-container，告诉浏览器该元素不应该被渲染，将被动态加入body的雷明伟hidden-detail。因此，仅当.detail-image-container为.hidden-detail.的后代时才需要应用*/
display: none;
}
.hidden-detail .thumbnail-list { /*当.thumbnail-list成为.hidden-detail的后代时，这些新添加的样式将会被激活*/
flex-direction: column;
align-items: center;
}
.hidden-detail .thumbnail-item { /*当.thumbnail-item成为.hidden-detail的后代时，这些新添加的样式将会被激活*/
max-width: 80%;
}
@media all and (min-width: 768px) { /*当设备宽度在768ox（通常是平板电脑的宽度）及以上是，我们新增的媒体查询样式就会生效*/
.main-content {
flex-direction: row;
overflow: hidden; /*不希望缩略图列表导致浏览器滚动，而是独立于浏览器窗口滚动*/
}
.thumbnail-list {
flex-direction: column;
order: 0; /*以前我们将order设置为2，使.thumbnail-list显示在.detail-image-container下方。现在，设为0，以便它遵循源顺序。*/
margin-left: 20px;
padding: 0 35px;
}
.thumbnail-item {
max-width: 250px;
}
.thumbnail-item + .thumbnail-item {
margin-top: 20px;
}
}main.js
var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';
var DETAIL_TITLE_SELECTOR = '[data-image-role="title"]';
var DETAIL_FRAME_SELECTOR = '[data-image-role="frame"]';
var THUMBNAIL_LINK_SELECTOR = '[data-image-role="trigger"]';
var HIDDEN_DETAIL_CLASS = 'hidden-detail';
var TINY_EFFECT_CLASS = 'is-tiny';
var ESC_KEY = 27;
function setDetails(imageUrl, titleText) {
'use strict';
var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); //获取大图的引用
detailImage.setAttribute('src', imageUrl); //传递两个字符串，属性名和新的值
var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
detailTitle.textContent = titleText; //指的是一个元素内部的文本（不包括HTML标签）
}
function imageFromThumb(thumbnail) {
'use strict';
return thumbnail.getAttribute('data-image-url');
}
function titleFromThumb(thumbnail) {
'use strict';
return thumbnail.getAttribute('data-image-title');
}
function setDetailsFromThumb(thumbnail) {
'use strict';
setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail)); //在setDetails真正被调用前，它的参数会先还原为最简单的值。
}
function addThumbClickHandler(thumb) { //回调函数的参数名不一定是event，最好使用描述性的名字
'use strict';
thumb.addEventListener('click', function(event) {
event.preventDefault(); //可以阻止链接让浏览器跳到另一个页面
setDetailsFromThumb(thumb);
showDetails(); //当一张缩略图被点击时，可以使用classList.remove来删除添加进去的类名
});
}
function getThumbnailsArray() { //检索匹配THUMBNAIL_LINK_SELECTOR元素的结果，赋值给thumbnails变量
'use strict';
var thumbnails = document.querySelectorAll(THUMBNAIL_LINK_SELECTOR); //返回的是一个节点列表，不是数组
var thumbnailArray = [].slice.call(thumbnails); //将返回的节点列表转换为一个数组。将节点列表转为数组的向后兼容的方式
return thumbnailArray;
}
function hideDetails() {
'use strict';
document.body.classList.add(HIDDEN_DETAIL_CLASS); //document.body属性访问body元素，这个DOM元素与body标签对应，调用add方法向body添加hidden-detail类
}
function showDetails() {
'use strict';
var frame = document.querySelector(DETAIL_FRAME_SELECTOR); //取得元素[data-image="frame"]的引用
document.body.classList.remove(HIDDEN_DETAIL_CLASS);
frame.classList.add(TINY_EFFECT_CLASS); //为了触发transition类，需要先添加TINY_EFFECT_CLASS后删除
setTimeout(function (){ //浏览器等待50毫秒之后向自己的执行队列中加入一个匿名函数。
frame.classList.remove(TINY_EFFECT_CLASS);
}, 50);
}
function addKeyPressHandler() {
'use strict';
document.body.addEventListener('keyup', function (event) {
event.preventDefault();
console.log(event.keyCode);
if(event.keyCode === ESC_KEY) { //只希望在按下ESC键，而非按下任意键时隐藏大图。
hideDetails();
}
})
}
function initializeEvents() { //该方法会把所有步骤联系起来，从而具有交互性。首先获取缩略图数组，然后遍历整个数组，给其中每个元素添加点击事件处理程序
'use strict';
var thumbnails = getThumbnailsArray(); //将结果（缩略图数组）赋值给一个行为thumbnails的变量
thumbnails.forEach(addThumbClickHandler); //不是一个好办法，不过在目前这样做不会引发错误，addThumbClickHandler函数只需要在foreach函数调用它时传递他的信息（thumbnails数组中的一个元素）
addKeyPressHandler();
}
initializeEvents();
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
