jQuery圆形旋转导航特效代码

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

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

以下是 jQuery圆形旋转导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<title>jQuery圆形旋转导航</title>
<html lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/mobilyblocks.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script src="js/jquery.transform-0.9.3.min.js"></script>
    <script src="js/superfish.js"></script>
    <script type="text/javascript" src="js/atooltip.jquery.js"></script>
    <script type="text/javascript" src="js/pages.js"></script>
    <script type="text/javascript" src="js/jScrollPane.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/contact-form.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
</head>
<body>
    <div class="spinner"><div><div></div></div></div>
    <div class="extra">
        <div class="main">

            <!--content -->
            <section id="content">
                <ul>
                    <li id="page_0">
                        <div class="inner">
                            <nav class="menu">
                                <ul id="menu" class="reset">
                                    <li id="nav1"><a href="#page_0"><img src="images/nav1.png" alt="" class="img"><img src="images/nav1_active.png" alt="" class="img_act"></a></li>
                                    <li id="nav7"><a href="#page_0"><img src="images/nav7.png" alt="" class="img"><img src="images/nav7_active.png" alt="" class="img_act"></a></li>
                                    <li id="nav6"><a href="#page_0"><img src="images/nav6.png" alt="" class="img"><img src="images/nav6_active.png" alt="" class="img_act"></a></li>
                                    <li id="nav5"><a href="#page_0"><img src="images/nav5.png" alt="" class="img"><img src="images/nav5_active.png" alt="" class="img_act"></a></li>
                                    <li id="nav4"><a href="#page_0"><img src="images/nav4.png" alt="" class="img"><img src="images/nav4_active.png" alt="" class="img_act"></a></li>
                                    <li id="nav3"><a href="#page_0"><img src="images/nav3.png" alt="" class="img"><img src="images/nav3_active.png" alt="" class="img_act"></a></li>
                                    <li id="nav2"><a href="#page_0"><img src="images/nav2.png" alt="" class="img"><img src="images/nav2_active.png" alt="" class="img_act"></a></li>
                                </ul>
                            </nav>
                            <div class="menu_box">
                                <div class="images">
                                    <span class="nav1"></span>
                                    <span class="nav2"></span>
                                    <span class="nav3"></span>
                                    <span class="nav4"></span>
                                    <span class="nav5"></span>
                                    <span class="nav6"></span>
                                    <span class="nav7"></span>
                                    <span class="nav8"></span>
                                    <span class="nav9"></span>
                                </div>
                                <div class="tittles">
                                    <div class="nav1">
                                        <h2>Menu 1 &nbsp;</h2>
                                    </div>
                                    <div class="nav2">
                                        <h2>Menu 2 &nbsp;</h2>
                                    </div>
                                    <div class="nav3">
                                        <h2>Menu 3</h2>
                                    </div>
                                    <div class="nav4">
                                        <h2>Menu 4 &nbsp;</h2>
                                    </div>
                                    <div class="nav5">
                                        <h2>Menu 5 &nbsp;</h2>
                                    </div>
                                    <div class="nav6">
                                        <h2>Menu 6 &nbsp;</h2>
                                    </div>
                                    <div class="nav7">
                                        <h2>Menu 7 &nbsp;</h2>
                                    </div>
                                    <div class="nav8">
                                        <h2>Privacy &nbsp;</h2>
                                    </div>
                                    <div class="nav9">
                                        <h2>Read more &nbsp;</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <!--content end-->
        </div>
        <div class="block"></div>
    </div>
    <div class="body1">
        <div class="main">
        </div>
    </div>
    <script>
        $(window).load(function () {
            $('.spinner').hide();
            $('body').css({ overflow: 'inherit' });
        });
    </script>
</body>
</html>

JS代码(script.js):

if ( $.browser.webkit){
	$(window).load(function(){
	// vertical scroll$('.scroll-pane').jScrollPane({
	showArrows:false,scrollbarWidth:12,dragMaxHeight:100}
);
}
)}
else{
	$(document).ready(function(){
	// vertical scroll$('.scroll-pane').jScrollPane({
	showArrows:false,scrollbarWidth:12,dragMaxHeight:100}
);
}
)}
$(document).ready(function(){
	// menu$('.menu').mobilyblocks({
	trigger:'click',direction:'counter',duration:400,zIndex:50,widthMultiplier:-0.95}
);
	$('#menu li .img_act').css({
	opacity:'0',visibility:'hidden'}
)$('#menu li:eq(0) .img_act').css({
	opacity:'1',visibility:'visible'}
);
	$('.menu_box .tittles > div').css({
	opacity:'0',visibility:'hidden'}
);
	$('.menu_box .nav1').css({
	opacity:'1',visibility:'visible'}
);
	$('.menu_box .images img').css({
	opacity:'0',visibility:'hidden'}
);
	$('.menu_box .images .nav1').css({
	opacity:'1',visibility:'visible'}
);
	menu_hover();
	$('.addit_menu').superfish({
	delay:400,animation:{
	opacity:'show',height:'show'}
,speed:400,autoArrows:false,dropShadows:false}
);
	$('.with_ul').hover(function(){
	$(this).find('> a').css({
	background:'#0d0c0c'}
)}
,function(){
	$(this).find('> a').css({
	background:'none'}
)}
)// tool tip$('.normaltip').aToolTip({
	toolTipClass:'aToolTip'}
);
	// list$('.list1 li a').hover(function(){
	$(this).stop().animate({
	paddingLeft:'45'}
,400)}
,function(){
	$(this).stop().animate({
	paddingLeft:'37'}
,400)}
)// map// for lightboxif ($("a[rel^='prettyPhoto']").length){
	$(document).ready(function(){
	// prettyPhoto$("a[rel^='prettyPhoto']").prettyPhoto({
	theme:'facebook'}
);
}
);
}
// content set heightvar h;
	function setHeight(){
	new_h=$(window).height();
	if ((h!=new_h)){
	h=new_h;
	if (h-275>729){
	$('#content > ul').css({
	height:(h-275)}
);
}
else{
	$('#content > ul').css({
	height:729}
);
}
}
}
setInterval(setHeight,10);
}
);
	var last=0,k=0;
	function menu_hover(){
	$('#menu li a').mouseenter(function(){
	nav=$(this).parent().attr('id');
	nav= nav.substr(3);
	deg=(parseInt(nav)-1)*51.4+360*k;
	if (last-deg>180){
	deg=deg+360;
	k=k+1}
else{
	if (last-deg<-180){
	deg=deg-360;
	k=k-1}
;
}
last=deg;
	$('#menu li').find('.img_act').stop().animate({
	opacity:'0'}
,400,function(){
	$(this).css({
	visibility:'hidden'}
)}
);
	$(this).find('.img_act').css({
	visibility:'visible'}
).stop().animate({
	opacity:'1'}
,400);
	$('.menu_box .tittles > div').stop().animate({
	opacity:'0'}
,400,function(){
	$(this).css({
	visibility:'hidden'}
)}
);
	$('.menu_box .tittles .nav'+nav).css({
	visibility:'visible'}
).stop().animate({
	opacity:'1'}
);
	$('.menu_box .images span').stop().animate({
	rotate:deg+'deg',opacity:'0'}
,400,function(){
	$(this).css({
	visibility:'hidden'}
)}
);
	$('.menu_box .images .nav'+nav).css({
	visibility:'visible'}
).stop().animate({
	rotate:deg+'deg',opacity:'1'}
,400);
}
)}

CSS代码(style.css):

/* Getting the new tags to behave */
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block;}
mark,rp,rt,ruby,summary,time{display:inline}
/* Left & Right alignment */
.left{float:left;}
.right{float:right;}
.wrapper{width:100%;overflow:hidden;}
/* Global properties ======================================================== */
body{background:url(bg.gif) top center repeat;border:0;font:13px Arial,Helvetica,sans-serif;color:#5e5e5e;line-height:22px;overflow:hidden}
.css3{border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0,0,0,.4);-moz-box-shadow:0 0 4px rgba(0,0,0,.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,.4);position:relative;}
/* Global Structure ============================================================= */
.main{margin:0 auto;width:940px;position:relative;z-index:1}
.spinner{background:url(bg.gif) top center repeat;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99;}
.spinner > div{position:absolute;top:0;left:0;width:100%;height:100%;background:url(bg_img.jpg) top center no-repeat;}
.spinner > div > div{position:absolute;top:0;left:0;width:100%;height:100%;background:url(ajax-loader.gif) 50% 50% no-repeat}
.body1{background:url(footer_bg.png) repeat}
.block{height:52px;}
.extra{min-height:100%;height:auto !important;height:100%;margin:0 auto -52px;background:url(bg_img.jpg) top center no-repeat;}
body,html{height:100%;}
/* ============================= main layout ====================== */
a{color:#5e5e5e;text-decoration:underline;outline:none}
a:hover{text-decoration:none}
h1{padding:61px 0 0 0;float:left;}
h2{font:24px Arial,Helvetica,sans-serif;color:#fff;line-height:1.2em;letter-spacing:-1px;padding-bottom:6px;}
h3{font:24px Arial,Helvetica,sans-serif;color:#fff;line-height:1.2em;letter-spacing:-1px;padding:26px 0 0px 0;text-align:center;min-height:87px;}
h3 span{display:block;margin-top:-5px;}
p{padding-bottom:22px;}
/* ============================= header ====================== */
header{height:119px;width:100%;overflow:hidden}
#cloe h1{font:40px Helvetica,Arial,Sans-Serif;font color:#306;text-align:center;color:#306;text-shadow:0px 2px 3px #003;}
/* Tooltips */
.aToolTip{border:1px solid #fff;background:#000;color:#fff;margin:0;padding:0px 5px;font-size:11px;}
.aToolTip .aToolTipContent{position:relative;margin:0;padding:0;}
.menu_box{width:252px;height:252px;position:absolute;top:-48px;left:-44px}
.menu_box .images{position:absolute;top:0;left:0;width:100%;height:100%;}
.images span{display:block;position:absolute;width:100%;height:100%}
.images .nav1{background:url(nav1_hover.png) 0 0 no-repeat}
.images .nav2{background:url(nav2_hover.png) 0 0 no-repeat}
.images .nav3{background:url(nav3_hover.png) 0 0 no-repeat}
.images .nav4{background:url(nav4_hover.png) 0 0 no-repeat}
.images .nav5{background:url(nav5_hover.png) 0 0 no-repeat}
.images .nav6{background:url(nav6_hover.png) 0 0 no-repeat}
.images .nav7{background:url(nav7_hover.png) 0 0 no-repeat}
.images .nav8{background:url(nav8.png) 0 0 no-repeat}
.images .nav9{background:url(nav1_hover.png) 0 0 no-repeat}
#menu{display:block;width:252px;height:252px;}
#menu > li{}
#menu > li > a{position:relative;display:block;width:168px;height:168px;}
#menu > li > a img{position:absolute;top:0;left:0;width:100%;height:100%;}
#menu > li > a:hover{}
ul.reset li{position:absolute;}
.inner{width:252px;height:252px;position:relative;margin-top:255px;margin-left:387px;}
.trigger{width:0px !important;height:0px !important;font-size:0;line-height:0}
.menu{z-index:1;position:relative}
.menu_box{z-index:99}
.tittles{text-align:center;line-height:18px;position:relative;}
.tittles > div{width:150px;padding-left:51px;position:absolute;top:0;left:0;padding-top:88px;}
.tittles .nav1{padding-top:112px;}
.tittles .nav2{padding-top:112px;}
.tittles .nav2:hover{}
.tittles .nav3{padding-top:112px;}
.tittles .nav4{padding-top:112px;}
.tittles .nav4 .addit_menu{}
.tittles .nav5,.tittles .nav6,.tittles .nav7,.tittles .nav8,.tittles .nav9{padding-top:112px;}
.addit_menu{width:120px;margin-left:-10px}
.addit_menu > li{margin-top:-1px;background:url(menu_line.gif) 10px bottom no-repeat;height:25px;position:relative;}
.addit_menu > li > a{line-height:25px;display:block;text-decoration:none;border-radius:14px;-moz-border-radius:14px;-webkit-border-radius:14px;padding:0 10px;zoom:1;position:relative}
.addit_menu > li > a > span{display:block;}
.addit_menu > .end{background:none}
.addit_menu > .with_ul > a{border-radius:14px 0 0 14px;-moz-border-radius:14px 0 0 14px;-webkit-border-radius:14px 0 0 14px;}
.addit_menu > .with_ul > a > span{background:url(menu_arrow.gif) right 9px no-repeat}
.addit_menu > li:hover> a{background:#0d0c0c}
.addit_menu .ul_1,.addit_menu .ul_2{position:absolute;top:0;left:114px;width:147px;padding-right:1px;}
.addit_menu .ul_1 > li,.addit_menu .ul_2 > li{padding-bottom:1px;position:relative;background:#0d0c0c;padding:0 12px;zoom:1}
.addit_menu .ul_1 > li > a,.addit_menu .ul_2 > li > a{text-decoration:none;display:block;line-height:26px;background:#0d0c0c;}
.addit_menu .ul_1 > li > a span,.addit_menu .ul_2 > li > a span{display:block;}
.addit_menu .ul_1 > li > a span span,.addit_menu .ul_2 > li > a span span{padding:0 10px;}
.addit_menu .ul_1 > li:hover > a,.addit_menu .ul_2 > li:hover > a{color:#fff;background:#2c2c2c}
.addit_menu .ul_1 > li:hover > a > span,.addit_menu .ul_2 > li:hover > a > span{background:url(menu_bg_left.gif) 0 0 no-repeat}
.addit_menu .ul_1 > li:hover > a > span span,.addit_menu .ul_2 > li:hover > a > span span{background:url(menu_bg_right.gif) top right no-repeat}
.addit_menu .ul_1 > li:hover,.addit_menu .ul_2 > li:hover{}
.addit_menu .ul_1 > .top,.addit_menu .ul_2 > .top{background:url(menu_bg_top.png) 0 0 no-repeat;width:148px;height:17px;font-size:0;line-height:0;}
.addit_menu .ul_1 > .bot,.addit_menu .ul_2 > .bot{background:url(bg_menu_bot.png) 0 0 no-repeat;width:148px;height:17px;font-size:0;line-height:0}
.addit_menu .ul_2{left:148px;top:-17px;}
.addit_menu .ul_2 > .top{background:url(menu_bg_top2.png) 0 0 no-repeat;}
.addit_menu > ul{display:none}
* + html .addit_menu .ul_1{left:400px;}
/* ============================= content ====================== */
#content,#content > ul{height:729px;position:relative;width:100%;overflow:hidden}
#content > ul > li{position:absolute;width:673px;height:673px;right:0;top:50%;margin-top:-345px;visibility:hidden}
#page_0{height:630px;width:100%;top:50%;margin-top:-365px;right:auto;left:0;visibility:visible}
.box{position:relative;top:0;left:0;width:673px;height:673px;}
.box_img{position:absolute;width:0;height:0;top:337px;left:337px;z-index:1}
.text{position:relative;padding:90px;z-index:2}
.but_close{position:absolute;width:57px;height:57px;display:block;z-index:2;top:90px;right:63px;z-index:3}
.but_close img{position:absolute;width:100%;height:100%;z-index:1;top:0;left:0}
.but_close .img{z-index:2}
.pad_bot1{padding-bottom:22px;}
.pad_bot2{padding-bottom:12px;}
.pad_left1{padding-left:31px;}
.pad1{padding-top:7px;padding-bottom:13px;}
.marg_right1{margin-right:26px;}
.link1{padding-right:11px;background:url(marker_2.gif) right 9px no-repeat;display:inline-block;color:#fff}
.font1{font-size:20px;color:#5f5f5f;line-height:1.2em;font-style:italic;text-align:center;display:block;padding:5px 0 15px 0}
.font2{font-size:15px;}
/*================ScrollPane==========================*/
.scroll-pane,.scroll{height:326px;padding-right:18px;overflow:auto;position:relative;z-index:99;}
.jScrollPaneContainer{position:relative;overflow:hidden;z-index:1;width:100% !important}
.jScrollPaneTrack{position:absolute;cursor:pointer;right:0px;top:0;height:100%;background:url(scroll_track.gif) repeat-y}
.jScrollPaneTrack span{display:block;background:url(scroll_track_top.gif) 0 0 no-repeat;position:absolute;top:0;left:0;width:100%;height:100%}
.jScrollPaneTrack span span{background:url(scroll_track_bot.gif) bottom no-repeat}
.jScrollPaneDrag{position:absolute;background:url(scroll_drag.png) no-repeat;cursor:pointer;overflow:hidden;}
.jScrollPaneDragTop{position:absolute;top:0;left:0;overflow:hidden;}
.jScrollPaneDragBottom{position:absolute;bottom:0;left:0;overflow:hidden;}
.list1{padding-left:46px;}
.list1 li{line-height:30px;}
.list1 li a{padding-left:37px;background:url(marker_1.png) 0 5px no-repeat;display:inline-block;color:#fff;}
#page_1 .list1 li a:hover{color:#f03d26;background-position:0 -25px}
.color1{color:#fff}
.under{background:url(line_hor1.gif) left bottom repeat-x;padding-bottom:18px;margin-bottom:23px}
.address{padding-bottom:6px;}
.address .right{margin-right:175px;}
.address a{text-decoration:none}
.address a:hover{color:#fff}
/* Lightbox image */
.lightbox-image{position:relative;overflow:hidden;display:block;background:#fff}
.lightbox-image img{position:relative;z-index:2;}
.lightbox-image span{display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(magnify.png) no-repeat 50% 50%;z-index:1;}
.pp_nav{padding-bottom:0;}
.pp_description{padding-bottom:0;}
.pp_details{height:0 !important;margin:0 !important}
.pp_close{position:absolute;right:-15px;top:-35px;z-index:99}
.pp_content{}
#map{display:none;}
/* ============================= footer ====================== */
/* ============================= forms ============================= */
#contact_form{padding-top:18px}
#contact_form a{float:right;color:#fff}
#back{float:right;}
#contact-form input{width:197px;background:none;padding:10px 12px;float:left;font:13px Arial,Helvetica,sans-serif;color:#5e5e5e;height:15px;}
#contact-form textarea{overflow:auto;width:242px;background:none;padding:10px 12px;float:left;font:13px Arial,Helvetica,sans-serif;color:#5e5e5e;height:93px;margin:0}
#contact-form fieldset{border:none;width:100%;overflow:hidden;}
#contact-form .rowElem{display:block;position:relative;width:100%;overflow:hidden;min-height:39px;background:url(bg_input.png) 0 0 no-repeat}
#contact-form .textarea-box{width:100%;display:inline-block;position:relative;min-height:117px;overflow:hidden;padding-bottom:9px;background:url(bg_textarea.png) 0 0 no-repeat}
#contact-form label{padding:0;display:none;font-size:10px;position:relative;font-size:11px;left:10px;top:1px;margin-bottom:0px}
#contact-form .error{color:#fff;}
#contact-form fieldset{border:none;}
div#contact_form .download-box p{padding:16px 30px;background:#212121;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;position:relative}
#contact-form .bg{float:left;background:#212121;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;position:relative;}

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