登陆 免费注册 提交网站
站长资讯 >> 站长学院 >> 网页制作
 2014-11-01 11:42浏览: 2129 次

Jq扇形,圆形菜单插件实现代码

献上自己刚写的Jq圆形和扇形菜单插件,并且提供了几种特效供选择。自己也是第一次写这种圆形或者扇形的效果,因为要设计到三角函数的运算,自己数学很差哈,不过还是试试做了一下(还在纸上做了草稿,哈哈)。试着做了之后发现也没有想象中的难,现在献上方法以及代码。

先看一张效果图:

方法:

第一部:计算中心点的坐标,这个很简单,我们根据半径来很好计算。

第二部:计算出圆弧上的点的坐标,这个难点在于我们不知道有多少个点以及坐标的计算,因为菜单的数量是我们动态定的,绑定的Json格式的数据。所以,我们需要用360°来除以个数。来得出每个点所在的角度。然后我们通过sin和cos的计算,算出每个点的x和y的坐标,在计算的时候需要注意,Javascript提供的Math.sin()或者Math.cos()方法里面的不是度数,而是弧度。弧度与角度的计算公式也给出来哈:

弧度=raius*Math.PI/180(raius是度数)

第三部:动态效果,我们计算出每个点的最终坐标之后,动态效果就是Jq的Animate的事了,没什么难的哈。

Js插件代码:

 

网站首页 - 关于我们 - 联系我们 - 友情链接 - 帮助中心
Copyright ©2007-2022 www.Aisila.com All Rights Reserved
苏ICP备20008864号-4