效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>扇形导航栏</title>
<style>
*{
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;
}
</style>
<script>
window.onload=function() {
var nav=document.getElementById("nav");
var lis=document.querySelectorAll("li");
var click=0;
var clicked=true;
lis[lis.length-1].onclick=function() {
for (var i=0;i<lis.length;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.length-1;i++) {
lis[i].index=i;
lis[i].onclick=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<lis.length;i++) {
rightdeg=rightdeg+15;
lis[i].style.transform='rotate('+rightdeg+'deg)'
}
}
}
}
</script>
</head>
<body>
<ul id="nav">
<li><img src="img/img1.png" alt="" /></li>
<li><img src="img/img2.png" alt="" /></li>
<li><img src="img/img3.png" alt="" /></li>
<li><img src="img/img4.png" alt="" /></li>
<li><img src="img/img5.png" alt="" /></li>
<li><img src="img/img6.png" alt="" /></li>
<li><img src="img/img7.png" alt="" /></li>
<li><img src="img/img8.png" alt="" /></li>
<li><img src="img/img9.png" alt="" /></li>
<li><img src="img/img10.png" alt="" /></li>
<li><img src="img/img11.png" alt="" /></li>
<li><img src="img/img12.png" alt="" /></li>
</ul>
</body>
</html>
目的：
- 点击封面导航（最上层的）后展开，最底下的导航（第一个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 属性
值描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
规定速度效果的速度曲线。
transition-delay
定义过渡效果何时开始。
、
、
、
、
、
、
、
、
、
、
、
、
、
、
网友评论