jquery邮票手风琴导航特效代码

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

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

以下是 jquery邮票手风琴导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery邮票手风琴导航</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<script type="text/javascript" src="javascript/jquery-1.4.2.js"></script>

<script>
  $(document).ready(function(){
  	lastBlock = $("#a1");
    maxWidth = 210;
	minWidth = 75;	
    
    $("ul li a").hover(	
		function(){			
			$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
			$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
			currentBlock = this;				
			lastBlock = this;			
	    }
	);
  });
</script>
  
</head>
<body>
 <ul>
 	<li>
 		<a id="a1">
	 		<img src="images/free_thumb.jpg" />
			<p>
				<strong>Freebies</strong><br/>
				Download free files to make your job easier.
			</p>
		</a>

 	</li>
	<li>
 		<a> 
	 		<img src="images/tut_thumb.jpg" />
			<p>
				<strong>Tutorials</strong><br/>
				Tips and tricks to help you keep up with the latest technology.
			</p>
		</a>

 	</li>
	<li>
 		<a>
 			<img src="images/inspire_thumb.jpg" />
			<p> 
		 		<strong>Inspiration</strong><br/>
				Get inspired by what other designers are doing.
			</p>
		</a>
 	</li>
 </ul>
</body>
</html>

CSS代码(styles.css):

body{background-color:#000;color:#FFFFFF;}
a{color:#FFCC00;}
ul{list-style:none;font-family:Arial,sans-serif;font-size:11px;margin:0;padding:0;}
ul li{float:left;padding:10px;display:block;margin-right:10px;color:#f0cdcd;background:transparent url(../images/bg.gif) repeat-x;}
ul li p strong{color:#fff;font-size:13px;font-family:Georgia;}
ul li a{display:block;overflow:hidden;height:75px;width:75px;cursor:pointer;}
#a1{width:210px;}
ul li img{z-index:100;position:absolute;border:3px solid #881212;}
ul li p{margin:0;padding:0;width:120px;display:block;margin-left:85px;}

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