html制作扇形菜单视频,带动画的扇形导航栏

效果：

源码：

扇形导航栏

*{

margin: 0;

padding: 0;

}

#canvas {

background: #000;

}

#nav {

width: 91px;

height: 461px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

#nav li {

position: absolute;

left: 0;

top: 0;

list-style: none;

transform-origin: 45px 455px;

transition: 1s;

}

window.οnlοad=function() {

var nav=document.getElementById("nav");

var lis=document.querySelectorAll("li");

var click=0;

var clicked=true;

lis[lis.length-1].οnclick=function() {

for (var i=0;i

var n=i-lis.length/2; /*寻找i与n的关系*/

/*if (click==0) {

n=n*15;

} else if ((click%2)==1) {

n=(click+1)*180;

} else {

n=n*15+click*180;

} */

if(clicked) {

n=n*15;

} else {

n=360;

}

lis[i].style.transform='rotate('+n+'deg)';

}

click++;

clicked=!clicked;

console.log(click);

}

for (var i=0;i

lis[i].index=i;

lis[i].οnclick=function(){

var leftdeg=0;

var rightdeg=15;

this.style.transform='rotate(0deg)';

for (var i=this.index-1;i>=0;i--) {

leftdeg=leftdeg-15;

lis[i].style.transform='rotate('+leftdeg+'deg)';

}

for (var i=this.index+1;i

rightdeg=rightdeg+15;

lis[i].style.transform='rotate('+rightdeg+'deg)'

}

}

}

}

目的：

点击封面导航(最上层的)后展开，最底下的导航(第一个li)处于水平位置，相邻的导航夹角成15deg，(垂直位置为0deg)

点击某个导航，位置变为竖直方向；

它的左边的导航紧随其后，且每个相邻的导航夹角为15deg；

它的右边最近的导航与之成30deg，右边剩余的导航之间夹角均为15deg。

再次点击封面导航，各导航顺时针旋转后恢复初始状态。

1.CSS中设置元素居中

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

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 属性

、

、

、

、

、

、

、

、

、

、

、

、

、

、

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