带动画的扇形导航栏

效果：

源码：

目的：

1. 点击封面导航（最上层的）后展开，最底下的导航（第一个li）处于水平位置，相邻的导航夹角成15deg，（垂直位置为0deg）
2. 点击某个导航，位置变为竖直方向；
   它的左边的导航紧随其后，且每个相邻的导航夹角为15deg；
   它的右边最近的导航与之成30deg，右边剩余的导航之间夹角均为15deg。
3. 再次点击封面导航，各导航顺时针旋转后恢复初始状态。

1.CSS中设置元素居中

这里我使用的方法是将子元素的position设为absolute，top, right,bottom,left的值均设为0，margin设为auto。

• 拓展一些居中的方法
  拓展阅读1
  拓展阅读2
  拓展阅读3

2.HTML DOM querySelector() 方法

定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
返回值： 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
描述：指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

• querySelector()方法与getElementBy...()系列方法的区别：

1. W3C 标准querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。
2. 浏览器兼容querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。getElementsBy 系列，以最迟添加到规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持该方法了。
3. 接收参数querySelectorAll 方法接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。代码如下

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

需要注意的是，querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的。所以下面这种写法，将会抛出异常。代码如下

try {
var e1 = document.getElementsByClassName('1a2b3c');
var e2 = document.querySelectorAll('.1a2b3c');
}  catch (e) { 
console.error(e.message);
}
console.log(e1 && e1[0].className);
console.log(e2 && e2[0].className);

（CSS 选择器中的元素名，类和 ID 均不能以数字为开头。）
4. 返回值大部分人都知道，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。看看下面这个经典的例子

// Demo 1
var ul = document.querySelectorAll('ul')[0], 
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++) { 
ul.appendChild(document.createElement("li"));
}
// Demo 2
var ul = document.getElementsByTagName('ul')[0], 
lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++) {
 ul.appendChild(document.createElement("li"));
}

因为 Demo 2 中的 lis 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。而 Demo 1 中的 lis 是一个静态的 Node List，是一个 li 集合的快照，对文档的任何操作都不会对其产生影响。

3. CSS3 transform 属性

• 定义和用法
  transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
  

  

  
  transform-origin：设置旋转的基点，2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。（默认值： 50% 50% 0）

4. CSS3 transition 属性

值描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
规定速度效果的速度曲线。
transition-delay
定义过渡效果何时开始。

、
、
、
、
、
、
、
、
、
、
、
、
、
、

心得：接触了一些CSS3的属性，加深对for循环的熟悉，同时也锻炼了数学计算与程序语言相结合的能力，深刻体会到了数学的重要性。。。