jQuery版仿Path菜单效果
发布时间:2013-06-07 编辑:jiaochengji.com
昨日在一个前端网站上看见了一个老外写的纯用css3做的仿Path菜单,心里痒痒,于是也用jQuery写了一个,现在分享给大家
昨日在一个前端网站上看见了一个老外写的纯用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插件)
脚本之家打包下载
您可能感兴趣的文章:
jQuery版仿Path菜单效果
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
jQuery菜单插件 Smooth Navigational Menu
CSS Dock Menu
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
jQuery水平下拉菜单 jMenu
jQuery实现的类flash菜单效果代码
7款风格新颖的jQuery/CSS3菜单导航分享
简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)
[关闭]