jquery二级图片滚动导航特效代码

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

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

以下是 jquery二级图片滚动导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery二级图片滚动导航</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css">
</head>
<body>
<div id="menu-wrapper">
  <ul class="menu">
    <li> <a href="#">CSS Tutorial</a> </li>
    <li> <a href="#">jQuery Tutorial</a> </li>
    <li> <a href="#">Code Snippet</a> </li>
    <li> <a href="#">Freebies</a> </li>
  </ul>
</div>
<div id="submenu-wrapper">
  <ul class="submenu">
    <li> <a href="#"> <img src="images/9.jpg" /> Photoshop Effect vs CSS3 Properties </a> </li>
    <li> <a href="#"> <img src="images/10.jpg" /> CSS3 Music Player Menu </a> </li>
    <li> <a href="#"> <img src="images/11.jpg" /> Using Pictogram Webfont for Replacing Image </a> </li>
    <li> <a href="#"> <img src="images/12.jpg" /> Styling Form Elements Like Google Chrome's Preferences </a> </li>
  </ul>
  <ul class="submenu">
    <li> <a href="#"> <img src="images/13.jpg" /> Creating "Next Level" Search Form Using jQuery & CSS3 </a> </li>
    <li> <a href="#"> <img src="images/14.jpg" /> Creating Consecutive Slide Using jQuery </a> </li>
    <li> <a href="#"> <img src="images/15.jpg" /> Create Your Own Dashboard Menu </a> </li>
    <li> <a href="#"> <img src="images/16.jpg" /> How to Create a Walking Navigation </a> </li>
  </ul>
  <ul class="submenu">
    <li> <a href="#"> <img src="images/5.jpg" /> [CodeSnippet] jQuery : Fade In Webpage </a> </li>
    <li> <a href="#"> <img src="images/6.jpg" /> [CodeSnippet] CSS3 Flying Menu </a> </li>
    <li> <a href="#"> <img src="images/7.jpg" /> [CodeSnippet] Twitter-like Input Using CSS3 </a> </li>
    <li> <a href="#"> <img src="images/8.jpg" /> [Code Snippet] CSS : Hover and Press Button </a> </li>
  </ul>
  <ul class="submenu">
    <li> <a href="#"> <img src="images/1.jpg" /> jQuery Plugin : jConfirmAction </a> </li>
    <li> <a href="#"> <img src="images/2.jpg" /> Free Web UI Element Pack </a> </li>
    <li> <a href="#"> <img src="images/3.jpg" /> Free PSD : Sticker Buttons </a> </li>
    <li> <a href="#"> <img src="images/4.jpg" /> Sweet Tooltip a jQuery & CSS3 Tooltips </a> </li>
  </ul>
</div>
<p id="title"> AUTO MOVING SUBMENU USING JQUERY <br/>
  <a href="#">&laquo; read tutorial</a> </p>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function(){
	/* Bootstraping variable */
menu= $('.menu li');
	submenuWrapper= $('#submenu-wrapper');
	submenu= submenuWrapper.children('ul');
	firstSubmenu= submenu.eq(0);
	/* When menu on mouse over and out */
menu.hover(function(){
	moveTo = $(this).index() * 11;
	showsubmenu(submenuWrapper);
	firstSubmenu.stop().animate({
	'marginTop':'-'+moveTo+'em'}
);
}
,function(){
	hidesubmenu(submenuWrapper);
}
);
	/* When sub menu wrapper on mouse over and out */
submenuWrapper.hover(function(){
	showsubmenu($(this));
}
,function(){
	hidesubmenu($(this));
}
);
	/* Add focus on selected li */
submenu.children('li').hover(function(){
	$(this).siblings().stop().animate({
	'opacity':'0.5'}
);
}
,function(){
	$(this).siblings().stop().animate({
	'opacity':'1'}
);
}
);
	/* Add focus on selected parent li */
submenu.hover(function(){
	menu.eq($(this).index()).addClass('selected')}
,function(){
	menu.eq($(this).index()).removeClass('selected')}
);
	/* Function to show sub menu */
function showsubmenu(item){
	if(!item.hasClass('show'))item.addClass('show').stop().animate({
	'marginTop':'0'}
);
}
/* Function to hide sub menu */
function hidesubmenu(item){
	item.removeClass('show').stop().animate({
	'marginTop':'-12em'}
);
}
}
);

CSS代码(zzsc.css):

@import url(http://fonts.googleapis.com/css?family=Pontano+Sans|Poiret+One);body{margin:0;background-image:-webkit-gradient(linear,left top,left bottom,from(#277d8e),to(#45a478));background-image:-webkit-linear-gradient(top,#277d8e,#45a478);background-image:-moz-linear-gradient(top,#277d8e,#45a478);background-image:-ms-linear-gradient(top,#277d8e,#45a478);background-image:-o-linear-gradient(top,#277d8e,#45a478);background-image:linear-gradient(to bottom,#277d8e,#45a478);background-repeat:no-repeat;background-attachment:fixed;text-align:center;}
#menu-wrapper{position:relative;display:block;z-index:2;height:60px;background-image:-webkit-gradient(linear,left top,left bottom,from(#535557),to(#333532));background-image:-webkit-linear-gradient(top,#535557,#333532);background-image:-moz-linear-gradient(top,#535557,#333532);background-image:-ms-linear-gradient(top,#535557,#333532);background-image:-o-linear-gradient(top,#535557,#333532);background-image:linear-gradient(to bottom,#535557,#333532);font-family:"Pontano Sans";font-size:15px;color:#fff;text-align:center;}
.menu{display:block;margin:0 auto;padding:0;width:870px;text-align:left;list-style-type:none;}
.menu li{display:inline-block;padding:16px 10px 25px 10px;cursor:pointer;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;}
.menu li:hover,.selected{background:#212525;}
.menu a,.menu a:visited{color:#fff;text-decoration:none;}
#submenu-wrapper{position:absolute;right:0;left:0;display:block;z-index:1;width:850px;height:130px;margin:-12em auto 0;padding:10px 10px;background:rgba(33,37,37,0.9);font-family:"Pontano Sans";font-size:13px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:10px;-moz-border-radius-bottomleft:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;box-shadow:0px 2px 7px rgba(0,0,0,0.5);overflow:hidden;}
.submenu{display:block;margin:0 0 1.5em;padding:0;list-style-type:none;}
.submenu li{display:inline-block;width:210px;vertical-align:top;text-align:center;}
.submenu li img{display:block;margin:0 auto 1em;width:200px;border-radius:5px;border:0;}
.submenu li a,.submenu li a:visited{color:#fff;text-decoration:none;}
#title{display:block;margin-top:4em;font-family:"Poiret One";font-size:45px;color:#fff;}
#title a,#title a:visited{font-size:20px;text-decoration:none;color:#fff;}

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