好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

jQuery版仿Path菜单发布!

jQuery版仿Path菜单发布!

http://www.cnblogs.com/lovejjhao/archive/2011/12/12/2285313.html

  昨日在一个前端网站上看见了一个老外写的纯用css3做的仿Path菜单,心里痒痒,于是也用jQuery写了一个,现在分享给大家。

  使用方法:

    1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋转插件),jquery.path.1.0.js(我自己写的Path插件)

    2.页面元素采用如下格式

    

 1   <div id="content">
2 <div>单击我</div>
3 <div>★</div>
4 <div>★</div>
5 <div>★</div>
6 <div>★</div>
7 <div>★</div>
8 </div>

复制代码

    最外层为父级包裹div,内部第一个div为需要单击元素,剩余的是Path菜单元素

    3.只需一小段代码

$(document).ready( function  (){
$('#content').path({
radius: 100, // 半径
radian: 90, // 弧度
duration: 200 // 动画时间
});
});

复制代码

    4.enjoy yourself!

    附

      插件下载

        jQueryRotateCompressed.2.1.js(旋转插件)   点我下载

        jquery.path.1.0.js(Path插件)      点我下载

作者: Leo_wl

    

出处: http://www.cnblogs.com/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于jQuery版仿Path菜单发布!的详细内容...

  阅读:42次