最近用iPhone的path觉得那个导航菜单效果不错,于是用jquery+css3实现了一把,ff下效果比较正常,但是chrome下在路径计算上有些问题。
主要思路是根据按钮的数目平分1/4圆,使用Math.sin(x),Math.cos(x)来计算每个按钮在圆上的x,y轴坐标,转动效果使用了css3里的transform属性。并且使用jquery animate()做了位移动画 和 delay()做了每个菜单的延时执行。
chrome下对坐标点的计算似乎有些问题,并且动画没有ff下面的平滑,保留,自己找下问题所在
example:path_nav
在进行坐标定位时用到的Math.cos(angle[i]*Math.PI*2/360) 应改为 Math.cos(angle[i]*0.017),这样取整的时候不会造成位数过大,导致两个浏览器的结果不同的问题。
在执行jquery动画的时候应该预先将原始坐标点写到节点上,这样就能解决chrome在执行动画的时候找不到初始坐标所产生的位移问题
fix_example: path_nav
个人原创:转载请注明出处
