jQuery左上角圆形菜单展开收缩特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery左上角圆形菜单展开收缩特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery左上角圆形菜单展开收缩特效</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/GS.js" type="text/javascript"></script>
</head>
<body>
    <div id="out">
        <div id="first"><a href="#"><img src="img/internet.png"></a></div>
        <div id="second"><a href="#"><img src="img/fax.png"></a></div>
        <div id="third"><a href="#"><img src="img/map.png"></a></div>
    </div>
    <div id="nav">
        <img src="img/home.png">
    </div>
</body>
</html>

JS代码(GS.js):

$(document).ready(function (){
	var flag=true;
	$("#nav").click(function(){
	if(flag){
	flag=false;
	$(this).css({
	transition:"transform 1s",webkitTransition:"transform 1s",oTransition:"transform 1s",msTransition:"transform 1s",mozTransition:"transform 1s",transform:"scale(1.5)",webkitTransform:"scale(1.5)",oTransform:"scale(1.5)",msTransform:"scale(1.5)",mozTransform:"scale(1.5)"}
);
	$("#out").css({
	transition:"margin-left 1s,margin-top 1s",webkitTransition:"margin-left 1s,margin-top 1s",oTransition:"margin-left 1s,margin-top 1s",msTransition:"margin-left 1s,margin-top 1s",mozTransition:"margin-left 1s,margin-top 1s",marginLeft:"-350px",marginTop:"-350px"}
);
	$("#first").css({
	transition:"left 1.2s,top 1.2s",webkitTransition:"left 1.2s,top 1.2s",oTransition:"left 1.2s,top 1.2s",msTransition:"left 1.2s,top 1.2s",mozTransition:"left 1.2s,top 1.2s",left:"200px",top:"15px"}
);
	$("#second").css({
	transition:"left 1.5s,top 1.5s",webkitTransition:"left 1.5s,top 1.5s",oTransition:"left 1.5s,top 1.5s",msTransition:"left 1.5s,top 1.5s",mozTransition:"left 1.5s,top 1.5s",left:"150px",top:"150px"}
);
	$("#third").css({
	transition:"left 1.8s,top 1.8s",webkitTransition:"left 1.8s,top 1.8s",oTransition:"left 1.8s,top 1.8s",msTransition:"left 1.8s,top 1.8s",mozTransition:"left 1.8s,top 1.8s",left:"20px",top:"210px"}
);
}
else{
	flag=true;
	$(this).css({
	transition:"transform 1s",webkitTransition:"transform 1s",oTransition:"transform 1s",msTransition:"transform 1s",mozTransition:"transform 1s",transform:"scale(1)",webkitTransform:"scale(1)",oTransform:"scale(1)",mozTransition:"scale(1)",msTransform:"scale(1)"}
);
	$("#out").css({
	transition:"margin-left 0.5s,margin-top 0.5s",webkitTransition:"margin-left 0.5s,margin-top 0.5s",oTransition:"margin-left 0.5s,margin-top 0.5s",msTransition:"margin-left 0.5s,margin-top 0.5s",mozTransition:"margin-left 0.5s,margin-top 0.5s",marginLeft:"-550px",marginTop:"-550px"}
);
	$("#first").css({
	transition:"left 1s,top 1s",webkitTransition:"left 1s,top 1s",oTransition:"left 1s,top 1s",msTransition:"left 1s,top 1s",mozTransition:"left 1s,top 1s",left:"-100px",top:"-100px"}
);
	$("#second").css({
	transition:"left 1s,top 1s",webkitTransition:"left 1s,top 1s",oTransition:"left 1s,top 1s",msTransition:"left 1s,top 1s",mozTransition:"left 1s,top 1s",left:"-100px",top:"-100px"}
);
	$("#third").css({
	transition:"left 1s,top 1s",webkitTransition:"left 1s,top 1s",oTransition:"left 1s,top 1s",msTransition:"left 1s,top 1s",mozTransition:"left 1s,top 1s",left:"-100px",top:"-100px"}
);
}
}
);
}
);

CSS代码(style.css):

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background-color:lightgoldenrodyellow;}
#nav{background:-webkit-radial-gradient(rgb(255,255,255),rgb(140,140,140));background:-o-radial-gradient(rgb(255,255,255),rgb(140,140,140));background:-moz-radial-gradient(rgb(255,255,255),rgb(140,140,140));background:-ms-radial-gradient(rgb(255,255,255),rgb(140,140,140));background:radial-gradient(rgb(255,255,255),rgb(140,140,140));position:absolute;width:200px;height:200px;border-radius:50%;margin-left:0px;top:-80px;left:-80px;border:1px solid gray;}
#nav img{position:absolute;left:85px;top:85px;}
#out{width:700px;height:700px;margin-left:-550px;margin-top:-550px;border-radius:50%;background-color:rgb(210,210,206);opacity:0.6;}
#first{position:absolute;width:100px;height:100px;left:-100px;top:-100px;opacity:1;transform:rotate(0deg);}
#second{position:absolute;width:100px;height:100px;left:-100px;top:-100px;transform:rotate(45deg);opacity:1;}
#third{position:absolute;width:100px;height:100px;left:-100px;top:-100px;transform:rotate(90deg);opacity:1;}

附件:下载该文件资源,减少时间成本(增值服务)