css3扇形菜单

最新推荐文章于 2023-10-25 17:42:15 发布

榴莲不好吃

最新推荐文章于 2023-10-25 17:42:15 发布

阅读量2.8k

点赞数 1

分类专栏：其它文章标签： css3 扇形扇形菜单 jQuery

本文链接：https://blog.youkuaiyun.com/sllailcp/article/details/48288959

版权

其它专栏收录该内容

21 篇文章

订阅专栏

尊重劳动成果，转载请注明出处（http://blog.youkuaiyun.com/sllailcp/article/details/48288959）...

闲暇之余做的一个css3扇形菜单

完整代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
.box{width:202px;height:202px;margin:100px auto;position:relative;-webkit-border-radius:110px;overflow:hidden;}/*overflow:hidden;*/
.cirOut{width:200px;height:200px;border:1px solid #39F;-webkit-border-radius:110px;background:rgba(0,0,0,0.5);overflow:hidden;-webkit-transform:scale(1);position:relative;-webkit-transition:.5s}/**/
.circle{width:50px;height:50px;border:1px solid #ccc;border-radius:50px;cursor:pointer;background:#0CF;text-align:center;line-height: 25px;position:absolute;left:75px;top:75px;-webkit-transition:.5s;}
.circle.active{background:#36F}

li{width:100px;height:100px;border-right:1px solid #000;border-bottom:1px solid #000;overflow:hidden;position:absolute;-webkit-transform-origin:right bottom;z-index:2;-webkit-transition:0.3s}
/*li:nth-of-type(1){transform:rotate(0deg) skew(60deg);}
li:nth-of-type(2){transform:rotate(30deg) skew(60deg);}
li:nth-of-type(3){transform:rotate(60deg) skew(60deg);}
li:nth-of-type(4){transform:rotate(90deg) skew(60deg);}*/

li.Bg{border:0;background:#00F;z-index:1;transition:0s}

li a{display:block;width:200px;height:200px;text-align:center;position:absolute;bottom:-100px;left:0;}
li a span{display:inline-block;width:25px;color:#fff;}
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
	var $box=$('.box');
	var $cirOut=$('.cirOut');
	var $circl=$('.circle');
	var $li=$('li');
	var $Bg=$('.Bg');
	var inow=true;
	var Timers=null;
	var inum=0;
	
	var lengths=$li.not('.Bg').length;
	var degs=360/lengths;
	var degsCir=Math.abs(degs-90);
	
	
	
	$circl.bind('mouseover',function(){
		clearTimeout(Timers);
		$Bg.css({'background':'#00F','webkitTransition':'0s'})
		if(inow){
			circleshow();
			inow=false;
		}else{
			$circl.addClass('active');
			$cirOut.css({'webkitTransform':'scale(1)'})
		}
	})
	$cirOut.bind('mouseover',function(e){
		clearTimeout(Timers)
		
		$circl.addClass('active');
		$cirOut.css({'webkitTransform':'scale(1)'})
		
	})
	
	
	$cirOut.bind('mouseout',function(){
		Timers=setTimeout(function(){
			inow=true;
			$circl.removeClass('active');
			$cirOut.css({'webkitTransform':'scale(0.2)'});	
		},500)
	})
			
	//移动的背景
	$Bg.css({'webkitTransform':'rotateZ('+360+'deg) skew('+degsCir+'deg)'});
	//每一个li绑定事件
	$li.not('.Bg').each(function(index, element) {
		$(element).css({'webkitTransform':'rotateZ('+index*degs+'deg) skew('+degsCir+'deg)'});//每个li的旋转角度    //li下的a标签反向旋转到垂直位置
		$(element).find('a').css({'webkitTransform':'skew(-'+degsCir+'deg) rotateZ(-'+(90-(90-degsCir)/2)+'deg)'});       
        $(element).bind('mouseover',function(){//每一个li绑定事件
			console.log(index)
			$Bg.css({'background':'#00F','webkitTransition':'0s'})//移动的背景清除动画事件
			if(inum==0&&index==(lengths-1)){ //如果是从第一个li移到最个后一li
				console.log(degs+',,,,'+degsCir)
				$Bg.css({'webkitTransform':'rotateZ('+360+'deg) skew('+degsCir+'deg)'});
			}
			if(inum==(lengths-1)&&index==0){//如果是从最后一个li移到第一个li
				console.log(degs+',,,,'+degsCir)
				$Bg.css({'webkitTransform':'rotateZ(-'+degs+'deg) skew('+degsCir+'deg)'});
			}
			setTimeout(function(){//延迟10毫秒执行
				$Bg.css({'webkitTransform':'rotateZ('+index*degs+'deg) skew('+degsCir+'deg)','webkitTransition':'0.3s'});
			},10)
			
			inum=index;
					
		})
        $(element).bind('mouseout',function(){
			  $Bg.css({'background':'none'});
		})
		
    });

	function circleshow(){
		$circl.addClass('active');
		$circl.bind('webkitTransitionEnd',delayshow);
		function delayshow(){
			$circl.unbind('webkitTransitionEnd',delayshow);
			$cirOut.css({'webkitTransform':'scale(1)'});
		}	
	}
})
</script>
</head>

<body>
    <div class="box">
    	<ul class="cirOut">
        	<li><a href="https://www.baidu.com/"><span>菜单一</span></a></li>
        	<li><a href="#"><span>菜单二</span></a></li>
        	<li><a href="#"><span>菜单三</span></a></li>
        	<li><a href="#"><span>菜单四</span></a></li>
        	<li><a href="#"><span>菜单五</span></a></li>
        	<li><a href="#"><span>菜单六</span></a></li>
        	
            <li class="Bg"></li>
        </ul>
        <div class="circle">鼠标<br>移上</div>
    </div>
</body>
</html>

效果图如下：