Day27 - Click and Drag
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
UI实现
HTML 代码
1 |
|
CSS 代码
1 | html { |
HTML + CSS 代码解析
- 每一个
div
就是一个item
,在本案例中一共有25个item
。
1 | <div class="item item1">01</div> |
- 如果大家细心观察效果图,不难发现一个规律,
n
和n + 9
的item
的颜色相同,所以有如下的CSS代码:
1 | .item:nth-child(9n+1) { |
item
的样式CSS
1 | .item { |
- 奇偶旋转样式
1 |
|
JS逻辑代码及注释
1 | <script> |