jQuery는 방사형 애니메이션 메뉴 effect_jquery를 구현합니다.-JS 튜토리얼-php.cn

jQuery는 방사형 애니메이션 메뉴 effect_jquery를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:50:03

원래의

944명이 탐색했습니다.

최종 효과:

방사형 메뉴를 만들기 전에 먼저 몇 가지 지식 사항을 알아야 합니다.

Math.sin(x) x의 양수 값입니다. 반환 값은 -1.0에서 1.0 사이입니다.

Math.cos(x) x의 코사인 값입니다. -1.0과 1.0 사이의 숫자를 반환합니다.

이 두 함수에서 X는 "각도"가 아닌 "라디안"을 나타냅니다. 라디안 계산 공식은 2*PI/360*angle이며, 다음과 같이 js를 사용하여 표현됩니다. Math.PI/180* Degree(1도) = 180/Math.PI)

예: 라디안 단위의 30° 각도 = 2*PI/360*30

원 위의 점 좌표를 계산하는 방법(원을 기준으로 하위 메뉴의 위치를 계산하는 데 사용)

상위 컨테이너의 왼쪽 상단을 점으로 사용하여 좌표계를 설정하세요

코드는 다음과 같습니다.

<!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>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.