jQuery版仿Path菜单效果
更新时间：2011年12月15日 00:13:11 作者：
昨日在一个前端网站上看见了一个老外写的纯用css3做的仿Path菜单，心里痒痒，于是也用jQuery写了一个，现在分享给大家
使用方法:
1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋转插件),jquery.path.1.0.js(我自己写的Path插件)
2.页面元素采用如下格式
<div id="content">
<div>单击我</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</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插件)
脚本之家打包下载
1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋转插件),jquery.path.1.0.js(我自己写的Path插件)
2.页面元素采用如下格式
复制代码 代码如下:
<div id="content">
<div>单击我</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</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插件)
脚本之家打包下载
相关文章
页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，javascript分页简单搞定。2010-07-07
本文主要介绍jQuery插件uploadify3.1的简单使用，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
jquery 升级到1.4后 jqDrag 拖动 不可用的修改方法2010-02-02
这篇文章主要为大家详细介绍了jQuery制作网页版选项卡的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
jQuery Form插件使用详解_动力节点Java学院整理
这篇文章主要为大家详细介绍了jQuery Form插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
jquery+ajaxform+springboot控件实现数据更新功能
这篇文章主要介绍了jquery+ajaxform+springboot控件实现数据更新操作,使用jquery的ajaxform插件是一个比较不错的选择。具体实现工程大家参考下本文2018-01-01
这篇文章主要介绍了jquery实现带二级菜单的导航示例,需要的朋友可以参考下2014-04-04
Jquery each方法跳出循环,并获取返回值(实例讲解)
这篇文章主要是对Jquery each方法跳出循环,并获取返回值进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了基于jquery编写分页插件的相关资料，感兴趣的小伙伴们可以参考一下2016-03-03
万年历，想必大家对它都不陌生吧，下面是使用jquery写的一个万年历示例，喜欢的朋友可以参考下2014-01-01
最新评论