首页 > 代码库 > 我也做了一个1/4圆形菜单

我也做了一个1/4圆形菜单

2024-07-11 12:19:09   216人阅读

效果如图

代码

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

 


联系
我们