每天学一个jquery插件-旋转的菜单

每天一个jquery插件——旋转的菜单

旋转的菜单

谈起旋转,不得不说这个是动画样式里面的万金油,很多东西感觉一加上动画就感觉高大上起来了,再加上旋转的特效,就一下Duang,感觉闪闪发亮,今天看到一个这样的菜单插件,让我来试着实现一下。

在这里插入图片描述
今天暂时吧效果实现出来,看看有没有哪些实现的难点,然后我再进而想想怎么做成一个插件让人用起来舒服的插件,
不多说了,先上我做好的效果溜溜。

在这里插入图片描述
然后把我的实现过程注释到代码里面,大家要看思路就看下面的代码吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收缩的菜单</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
		<style> /* 一个容器 */ #boxs{
     width: 400px; height: 400px; position: fixed; top: 200px; left: 200px; display: flex; justify-content: center; align-items: center; transition: all 0.5s; } /* 一个圆 */ .yuan{
     border: 1px solid lightgray; width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .yuan:hover{
     opacity: 0.8; cursor: pointer; } /* 中间的按钮 */ .cc{
     z-index: 99; background-color: #9b59b6; color: white;border: 1px solid lightgray; width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .cc:hover{
     cursor: pointer; opacity: 0.8; } .cc:active{
     background-color: gray; color: white; } /* 四角的按钮特效,以及下面的定位到四个角 */ .lt,.rt,.lb,.rb{
     position: absolute; color: white; } .lt{
     top: 0px; left: 0px; background-color: #2ecc71; } .rt{
     right: 0px; top: 0px; background-color: #3498db; } .lb{
     left: 0px; bottom: 0px; background-color: #f1c40f; } .rb{
     right: 0px; bottom: 0px; background-color: #e74c3c; } </style>
	</head>
	<body>
		<div id="boxs">
			<div class="cc"><span class="fa fa-home"></span></div>
			<div class="yuan lt"><span class="fa fa-address-book"></span></div>
			<div class="yuan rt"><span class="fa fa-backward"></span></div>
			<div class="yuan lb"><span class="fa fa-dashboard"></span></div>
			<div class="yuan rb"><span class="fa fa-vcard"></span></div>
		</div>
	</body>
</html>
<script> $(function(){
     $(".cc").click(function(){
     //因为高宽明确是写死的,所以这里我直接用boxs的宽度作为判断展开还是收缩的条件 var temp = $("#boxs").css("width"); if(temp=="400px"){
     //这一部分直接给css就能产生动画效果是因为标记了transition: all 0.5s;这个属性 $("#boxs").css({
     "width":"100px", "height":"100px", "top":"350px", "left":"350px", "transform":"rotate(360deg)" }) //不知道咋回事我给透明度并不会线性变化,所以这里我又用animate空值它逐渐的消失于出现 $(".yuan").stop().animate({
     "opacity":"0" },250) }else{
     $("#boxs").css({
     "width":"400px", "height":"400px", "top":"200px", "left":"200px", "transform":"rotate(0deg)" }) $(".yuan").stop().animate({
     "opacity":"1" },250) } }) }) </script>

这样子一个简简单单的特效就弄出来了,关于弄一个插件能,肯定是得用极少的参数实现最大的效果的目的,这个想想咋变成插件,我觉得作为一个菜单项,肯定是要有一个对象集合的,这个对象首先要包含他的图片,名称,超链接或者回调事件,这些参数才算是勉强能用,不过有在考虑一个问题,假如这里面的对象个数不确定,我肯定要把这个子菜单平均的分布在父容器的各个角度,不过我想不到咋弄这一点,因为我的基础很不牢我压根不知道咋计算每个对象的位置并且正确的把它放到正确的地方。
不过只要思想不滑坡,方法总比困难多,在这里我先说说我的解决办法,既然算不出他的坐标,那么索性就不算了,我来算角度,这个时候给每个按钮再套上一个父容器,全部都是穿过父容器中心的等宽适应父容器的辅助容器,然后对应的子菜单就全部定位在最左边,这个时候我就可以根据总数量计算每一个子菜单应该偏移的角度了,这样子我就可以达到旋转辅助容器来实现把子菜单均匀遍布父容器四周的目标了。并且这样对后续的动画效果也没有影响!

张贴在2