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 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
Prototype String对象 学习
Jul 19 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
vue axios用法教程详解
Jul 23 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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实现C#山寨ArrayList的方法
2015/07/16 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php实现头像上传预览功能
2017/04/27 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
电气自动化自荐信
2013/10/10 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
施工安全员岗位职责
2015/04/11 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL