jQuery版仿Path菜单效果


Posted in Javascript onDecember 15, 2011

使用方法:

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插件)
三水点靠木打包下载

Javascript 相关文章推荐
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
JS倒计时代码汇总
Nov 25 Javascript
js实现进度条的方法
Feb 13 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
VueJS实现用户管理系统
May 29 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 #Javascript
js 可拖动列表实现代码
Dec 13 #Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 #Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 #Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 #Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 #Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 #Javascript
You might like
Docker 如何布置PHP开发环境
2016/06/21 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
详解Javascript中的Object对象
2016/02/28 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Python的迭代器和生成器使用实例
2015/01/14 Python
Python比较两个图片相似度的方法
2015/03/13 Python
手把手教你python实现SVM算法
2017/12/27 Python
wxpython实现图书管理系统
2018/03/12 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
python基础之停用词过滤详解
2021/04/21 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏