网页设计:客户需要基于旋转的导航栏

时间:2013-03-08 05:19:53

标签: javascript css css3

我不知道这是否可行,但客户是坚定的。他希望他的导航栏内容沿着“Fibonacci Spiral”对齐。

这件事:

enter image description here

我甚至认为CSS3旋转方面在当前的任何浏览器中都不起作用,而且我不知道任何脚本语言是否会让我即使是最微不足道的可能性来创建一个自定义的弯曲轨道来强制对象遵循标准(并且几乎只有)水平和垂直对齐方法。但是,我确实接受了一个很好的挑战。毫不费力地退缩是很难做到的。

如果你们中任何人都知道我可能达到这种效果的最大幅度,我会感到惊讶。感谢您的时间!如果你认为在当前的网络浏览器中真的无法实现这一点,那就这么说吧!

1 个答案:

答案 0 :(得分:2)

无论如何,有趣的想法。希望你能让你的客户满意。 我以为我可能会有所收获。 找到了一个沿曲线弯曲文本的jQuery插件: http://tympanus.net/Development/Arctext/

也许人们可以制作一个缩小尺寸的方形div的布局,并为每一个指定曲线?

如果你转过它可能的div布局:http://upload.wikimedia.org/wikipedia/commons/9/95/FibonacciBlocks.svg

插件指定半径值的弯曲,可以向上或向下弯曲。它似乎不是为倾斜曲线构建的,但也许可以修改。

编辑:我对插件进行了一些实验,我相信它肯定有可能达到你需要的效果,虽然我必须非常清楚地知道三角函数(据我所知)才能使它正常运行。

另一个选择,也是我能想到的最简单的方法,就是利用一个古老的经典:图像地图! http://en.wikipedia.org/wiki/Image_map

只需一张漂亮的螺旋图像,然而你喜欢并使用图像映射来设置可链接区域。这可能是有意义的:http://www.outsharked.com/imagemapster/default.aspx?demos.html