首页 > 代码库 > 解析:用 CSS3 和 JavaScript 制作径向动画菜单
解析:用 CSS3 和 JavaScript 制作径向动画菜单
原作者的解析(英文):http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/
原作者的解析(译文):http://developer.51cto.com/art/201404/437152.htm
本文非转载,为个人原创解析,转载请先联系博主。谢谢~
首先,看看html的结构:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>kissy | TaoBaoUED</title> <link rel="stylesheet" href="http://www.mamicode.com/style.css" type="text/css" media="all"> <script src="http://www.mamicode.com/jquery-1.3.2.js"></script> <script src="http://www.mamicode.com/ext.js"></script> </head> <!-- Demo by http://creative-punch.net --> <!-- Modified by xzh - 20140701 --> <nav class="circular-menu"> <div class="circle"> <a href="">●</a> <a href="">■</a> <a href="">◆</a> <a href="">?</a> <a href="">★</a> <a href="">卍</a> <a href="">卐</a> <a href="">?</a> </div> <a href="http://www.mamicode.com/#" class="menu-button fa fa-bars fa-2x">A</a> </nav> <h1 class="author">Demo by <a href="" target="">Creative Punch</h1></span></span>
——Css完整代码请參见文章最后。
——Js完整代码请參见文章最后。
然后,看下页面:
图1-1
一開始,仅仅有两个是“可见”的元素,一个的类是.menu-button,还有一个的类是.circular-menu,由于按钮的position属性要设置在absolute,所以它的父元素外框.menu-button设置position为relative,如今分析.menu-button的属性:
1、 top和left的值为calc(50% - 30px),50%非常好理解,30px是怎么来的呢?注意到,height和left都为40px,而绝对位置的top和left属性分别表示元素左上角相对上方和左方的距离,如图1-2。为了让元素的中心点居中,距离应该减去元素的长宽的一半,可是它的长宽都是20px,为什么是减30px呢?原因在于它的padding属性为10px,相当于给它的长宽分别添加了20px。
得(30px = 40px/2 +10px)
图1-2
2、 line-height和height都为40px。使得文字可以垂直居中。
3、 border-radius:50%。圆形。
4、 display:block,删掉好像没什么影响。
再看被“隐藏”了的.circle,它里面装了几个<a>标签,它的透明度为0,还设置了CSS3的动画——transform和transition。当中,transition: all 0.4s ease-out为一打开网页时看到几个白点突然藏到大button背后的效果就是它干的,解释一下意思,全部属性在0.4s内渐渐消失。事实上完整的它是有4个參数的。单击button后,为div切换一个类.open。
.open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }渐显/渐隐。从0倍放大到1倍,变成图1-3的样子。
图1-3
如今。让我们去看看js代码,document载入之后为各个小<a>加入了top和left属性。为了更加easy被看懂。我略微改动了一下原demo代码,例如以下:
items[i].style.left = (50 - 35*Math.cos(2*Math.PI*i/len)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(2*Math.PI*i/len)).toFixed(4) + "%";35后面的一块意思是,从一个点開始。经历2π。期间2π平分成多少个点取决于<a>的个数。比如我们样例。<a>有8个,从x=0開始。正向取2π,将2π平分成8段。依次取8个点,他们的y值如图1-4所看到的,我们能够看到,8个点上的y值变化不正符合我们的圆圈位置变化规律么?35的意思是,让top和left最多取85%,最小取15%。
图1-4
举一反三:
1、 上面说了。2π被分成几段取决于<a>的个数。试着增删几个<a>看看吧。
2、 上面的代码是从0開始正向取2π的,试着改一下吧。注意始终不变的东西是2π*i/len,你能够作加减一些东西,或者为它加入负号之类的修改。特别地。加减一些东西的时候。如加上π/5,由于影响的是第一个点的取值。间接影响其它点的值,你会发现,全部<a>组成的圆圈好像被人顺/逆时针轻轻拧了一下,详细效果是如何的,你能够尝试弄出来看一下。
如今回过来看样式,.circle a中须要注意的的是margin-left和margin-top。还记得我们刚刚说的.menu-button中的left和top属性吗?对,两者都是几乎相同的意思。让我们回过来看图1-3。图中虚线框位置为我们没有设置margin-left和margin-top时的位置,相同地。我们取margin-left和margin-top为<a>元素的长宽的一半。记得负号。
触类旁通:
都说了跟前面的.menu-button几乎相同。那我们就不设置margin-top和margin-left了。那怎么改?
答:(字体颜色为白色。全选文字可见-->在js里,items[i].style.left和items[i].style.top都减20px就可以<--)
忘了说。注意假设还有border的时候,相同须要减去border的值。
最后。谢谢你认真看完了,不足之处,欢迎指出!
完整js和css代码例如以下:
$(document).ready(function(){ // Demo by http://creative-punch.net // Modified by xzh - 20140701 var items = document.querySelectorAll(‘.circle a‘); for(var i = 0, len = items.length; i < len; i++) { items[i].style.left = (50 - 35*Math.cos(2*Math.PI*i/len)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(2*Math.PI*i/len)).toFixed(4) + "%"; console.log(items[i].style.left+" "+items[i].style.top); } document.querySelector(‘.menu-button‘).onclick = function(e) { e.preventDefault(); document.querySelector(‘.circle‘).classList.toggle(‘open‘); } });
/* Demo by http://creative-punch.net */ /* Modified by xzh - 20140701 */ body { background: #39D; } .circular-menu { width: 250px; height: 250px; margin: 0 auto; position: relative; } .circle { width: 250px; height: 250px; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .circle a { text-decoration: none; color: white; display: block; height: 40px; width: 40px; line-height: 40px; margin-left: -20px; margin-top: -20px; position: absolute; text-align: center; } .circle a:hover { color: #eef; } .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #444; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #dde; } .menu-button:hover { background-color: #eef; } /* Author stuff */ h1.author { text-align:center; color: white; font-family: Helvetica, Arial, sans-serif; font-weight: 300; } h1.author a { color: #348; text-decoration:none; } h1.author a:hover { color: #ddd; }
解析:用 CSS3 和 JavaScript 制作径向动画菜单