带动画的扇形导航栏

作者: 木木口丁 | 来源:发表于2016-11-25 22:30 被阅读0次

效果：

源码：

<!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。

拓展一些居中的方法
拓展阅读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循环的熟悉，同时也锻炼了数学计算与程序语言相结合的能力，深刻体会到了数学的重要性。。。

网友评论

本文标题：带动画的扇形导航栏

本文链接：https://www.haomeiwen.com/subject/adpbpttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！