欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery版仿Path菜单效果实现方法

程序员文章站 2022-06-13 18:46:36
使用方法:     1.依次引用jquery.1.7.1,jqueryrotatecompressed.2.1.js(旋转插件),jquery.path.1.0.js(我自己写的path插件)   ...

使用方法:
    1.依次引用jquery.1.7.1,jqueryrotatecompressed.2.1.js(旋转插件),jquery.path.1.0.js(我自己写的path插件)
    2.页面元素采用如下格式

代码如下:


<p id="content">
<p>单击我</p>
<p>★</p>
<p>★</p>
<p>★</p>
<p>★</p>
<p>★</p>
</p>


最外层为父级包裹p,内部第一个p为需要单击元素,剩余的是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插件)