zoukankan      html  css  js  c++  java
  • 我也做了一个1/4圆形菜单

    效果如图

    代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0;}
    ul,li { list-style:none;}
    .footer { width:50px; height:50px; position:absolute; right:5px; bottom:5px;}
    .footer h3 { width:100%; height:100%; border-radius:50%; background-color:#03C; color:#fff; position:absolute; cursor:pointer; text-align:center; font-size:12px; line-height:50px; z-index:10;}
    .footer  ul { width:100%; height:100%; -webkit-transform:translate(,)}
    .footer  ul li { position:absolute; width:100%; height:100%; border-radius:50%; background-color:#888; color:#fff; -webkit-transition:all .5s linear 0s;text-align:center; font-size:12px; line-height:50px; } 
    </style>
    </head>
    
    <body>
    <div class="footer">
        <h3>click</h3>
      <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        
      </ul>
    </div>
    
    <script>
    var  ul = document.getElementById("list");
    var  li =  ul.getElementsByTagName("li");
    var radiu = 220;
    var arr = [],kai = false ;
    
    
    function execute (){
        
        for (var i=0; i<li.length;i++){
        
        if(kai){
            li[i].style.webkitTransform = "translate(0px,0px)"
            
        }else {
        
        li[i].style.webkitTransform = "translate("+arr[i].x+","+arr[i].y+")"}
            
            
        }
        kai = !kai ;
    }
    function nav (x,y){
        this.x = x ;
        this.y = y ;
        }
    but = document.querySelectorAll(".footer h3")[0];
    but.addEventListener("click",execute);
    +function (){
        for (var i=0; i<li.length;i++){
            var oneAngle = 90/(li.length) ;
            var angle =  (oneAngle*i+oneAngle/2) *Math.PI/180;
            var x = -radiu*Math.cos(angle)+"px";
            var y = -radiu* Math.sin(angle)+"px";
            var el = new nav(x,y);
            arr.push(el);
            li[i].style.transitionDelay=li[i].style.webkitTransitionDelay=li[i].style.mozTransitionDelay=li[i].style.msTransitionDelay=li[i].style.oTransitionDelay=(i*50)+"ms"; 
            
        }
    }();
    </script>
    </body>
    </html>
  • 相关阅读:
    [Visual Studio] [Config] [Transformation] [SlowCheetah] 在非Web工程中使用Transformation
    [SQLSERVER] 把TransactionLog截断
    [Windows] [Firewall] 增加进入规则
    [POWERSHELL] [.net 3.5] [Windows Server] 在Windows Server上安装.NET3.5
    杂碎
    VSCode 使用Settings Sync同步配置(最新版教程,非常简单)
    JavaScript:ES2019 的新特性
    重新认识构造函数、原型和原型链
    如何实现 React 中的状态自动保存?
    深拷贝
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3835199.html
Copyright © 2011-2022 走看看