首页 > 代码库 > 我也做了一个1/4圆形菜单
我也做了一个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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。