简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js实现扇形导航 - kong
Blogger Information
Blog 37
fans 0
comment 1
visits 28407
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js实现扇形导航 - kong
kong
Original
1061 people have browsed it


微信图片_20200707165612.png

<!DOCTYPE html>

<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>扇形导航</title>
</head>
<style>
   body,
   html {
       height: 100%;
       overflow: hidden;
   }

   #wrap {
       position: fixed;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background-color: red;
       right: 10px;
       bottom: 10px;
       text-align: center;
       line-height: 50px;
   }

   .inner {
       height: 100%;
   }

   .inner span {
       display: block;
       width: 100%;
       height: 100%;
       position: absolute;
       background-color: #000;
       z-index: 1;
       border-radius: 50%;
       color: #fff;
       left: 0;
       top: 0;
   }

   .home {
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       background-color: yellowgreen;
       border-radius: 50%;
       z-index: 9;
       transition: .5s;
   }
</style>

<body>
   <div id="wrap">
       <div class="inner">
           <span>1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
       </div>
       <div class="home">
           1
       </div>
   </div>
 

  <script>
        window.onload = function() {
            //获取类 .home
            var homeEl = document.querySelector(“.home”);
            //获取全部.inner > span
            var spans = document.querySelectorAll(“.inner > span”);
            var flag = true;
            var c = 140;
            //fn()函数
            function fn() {
                this.style.transition = “.3s”;
                this.style.transform = “rotate(-720deg) scale(1)”;
                this.style.opacity = 1;
                this.removeEventListener(“transitionend”, fn)
            }
            //点击菜单触发的效果
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function() {
                    this.style.transition = “.5s”;
                    this.style.transform = “rotate(-720deg) scale(1.5)”;
                    this.style.opacity = 0.1;
                    this.addEventListener(“transitionend”, fn);
                }
            }
            //点击home键展开菜单
            homeEl.onclick = function() {
                if (flag) {
                    this.style.transform = “rotate(-720deg) scale(1)”;
                    for (var i = 0; i < spans.length; i++) {
                        spans[i].style.transition = “all 1s ease “ + (i 
 .1) + “s”;
                        spans[i].style.transform = “rotate(-720deg) scale(1)”;
                        spans[i].style.left = -getPoint(c, 90 
 i / (spans.length - 1)).left + “px”;
                        spans[i].style.top = -getPoint(c, 90 
 i / (spans.length - 1)).top + “px”;
                    }
                } else {
                    this.style.transform = “rotate(0)”;
                    for (var i = 0; i < spans.length; i++) {
                        spans[i].style.transform = “rotate(0) scale(1)”;
                        spans[i].style.transition = “1s “ + ((spans.length - 1 - i) 
 .1) + “s”;
                        spans[i].style.left = 0 + “px”;
                        spans[i].style.top = 0 + “px”;
                    }
                }
                flag = !flag;
            };
            //计算菜单旋转出去的坐标
            function getPoint(c, deg) {
                var x = Math.round(c 
 Math.sin(deg 
 Math.PI / 180));
                var y = Math.round(c 
 Math.cos(deg 
 Math.PI / 180));
                return {
                    left: x,
                    top: y
                }
            }
        };
    </script>


</body>

</html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！