jQuery实现径向动画菜单效果


Posted in Javascript onJuly 17, 2015

最终效果:

jQuery实现径向动画菜单效果

在径向菜单的制作前,首先需要知道几点知识点:

Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间;

Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数;

这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2*PI/360*角度,使用js表示是这样的:Math.PI/180*度数(1度=180/Math.PI)

如:30° 角度 的弧度 = 2*PI/360*30

如何计算圆上任何点坐标(用于计算出子菜单相对于圆的位置)

jQuery实现径向动画菜单效果

以父容器左上角为圆点,建立坐标系

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>径向菜单的制作</title>
<meta charset="utf-8"/>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="jquery.js"></script> <!--此处需引入jquery文件-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #292a38;
font-family: "Microsoft Yahei";
}
h1 {
margin-top: 20px;
text-align: center;
color: #fff;
} 
.navWrap {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
border: 2px dotted #4e5061;
border-radius: 50%;
}
.navWrap .main-nav {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*分别向左上移动元素对象的50%,保证居中*/
width: 40px;
height: 40px;
line-height: 40px;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 3px;
text-shadow: 1px 1px 0px #000;
background: #15a5f3;
cursor: pointer;
} 
.navWrap nav {
position: absolute;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.5s ease-out;
opacity: 0;
} 
.navWrap.active nav {
transform: scale(1);
opacity: 1;
}
.navWrap nav > a{
position: absolute;
width: 30px;
height: 30px;
background: #f44283;
text-align: center;
line-height: 30px;
text-decoration: none;
color: #fff;
border-radius: 3px;
text-shadow: 1px 1px 0px #000;
transform: translate(-50%,-50%);
} 
</style>
</head> 
<body>

<h1>径向动画菜单效果演示</h1>

<div class="navWrap">
<nav>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
</nav>
<a class="main-nav">点我</a>
</div>

<script type="text/javascript">
$(document).ready(function() {
var isLocated = false; //防止重复初始化子菜单位置
$(".navWrap").on('click', '.main-nav', function(event) {
event.preventDefault();
var me = $(this);
var navWrap = me.closest('.navWrap');
var nav = navWrap.find('nav a');
if(!navWrap.hasClass('active')&&!isLocated){ 
//Y=R+Rsinθ
//X=R+Rcosθ
var r = navWrap.width()/2;
var startAngle =0, endAngle=360; //可以通过改变角度,做出各种各样的径向菜单

//子菜单的夹角
var total = nav.length;
var gap = (endAngle - startAngle)/total;

//角度->弧度
var radian = Math.PI/180;

/*
* 计算并确定各个子菜单的最终位置
*/
$.each(nav,function(index, el) {
// 当前子菜单与x轴正向的夹角 θ (角度->弧度)
var myAngle = (startAngle + gap*index) * radian; // θ
var x = r+r*Math.cos(myAngle),//myAngle为弧度
y = r+r*Math.sin(myAngle);
// 设置当前子菜单的位置 (left,top) = (x,y)
$(this).css({
left: x + 'px',
top: y + 'px'
});
});
isLocated = true;
}
navWrap.toggleClass('active');
});
})
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
localStorage实现便签小程序
Nov 28 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
JavaScript实现区块链
Mar 14 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 #Javascript
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
javascript图片预加载实例分析
Jul 16 #Javascript
javascript的BOM汇总
Jul 16 #Javascript
You might like
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
python字符串中的单双引
2017/02/16 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python使用Matplotlib画饼图
2018/09/25 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
大学生怎样写好自荐信
2014/02/25 职场文书
幼师求职自荐信
2014/05/31 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
护理培训心得体会
2016/01/22 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers