windows8风格jquery菜单特效代码

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

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

以下是 windows8风格jquery菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>windows8风格的jquery菜单特效</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		
		<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			$().ready(function() {
				$('.kwicks').kwicks({
					max : 205,
					spacing : 5
				});
			});
		</script>
	</head>
	
	<body>
		<ul class="kwicks horizontal" >
			<li id="kwick1"></li>
			<li id="kwick2"></li>
			<li id="kwick3"></li>
			<li id="kwick4"></li>
		</ul>
</body>
</html>

JS代码(jquery.kwicks-1.5.1.pack.js):

/*Kwicks for jQuery (version 1.5.1)Copyright (c) 2008 Jeremy Martinhttp://www.jeremymartin.name/projects.php?project=kwicksLicensed under the MIT license:http://www.opensource.org/licenses/mit-license.phpAny and all use of this script must be accompanied by this copyright/license notice in its present form.*/
(function($){
	$.fn.kwicks=function(n){
	var p={
	isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500}
;
	var o=$.extend(p,n);
	var q=(o.isVertical?'height':'width');
	var r=(o.isVertical?'top':'left');
	return this.each(function(){
	container=$(this);
	var k=container.children('li');
	var l=k.eq(0).css(q).replace(/px/,'');
	if(!o.max){
	o.max=(l*k.size())-(o.min*(k.size()-1))}
else{
	o.min=((l*k.size())-o.max)/(k.size()-1)}
if(o.isVertical){
	container.css({
	width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'}
)}
else{
	container.css({
	width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')}
)}
var m=[];
	for(i=0;
	i<k.size();
	i++){
	m[i]=[];
	for(j=1;
	j<k.size()-1;
	j++){
	if(i==j){
	m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}
else{
	m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}
}
}
k.each(function(i){
	var h=$(this);
	if(i===0){
	h.css(r,'0px')}
else if(i==k.size()-1){
	h.css(o.isVertical?'bottom':'right','0px')}
else{
	if(o.sticky){
	h.css(r,m[o.defaultKwick][i])}
else{
	h.css(r,(i*l)+(i*o.spacing))}
}
if(o.sticky){
	if(o.defaultKwick==i){
	h.css(q,o.max+'px');
	h.addClass('active')}
else{
	h.css(q,o.min+'px')}
}
h.css({
	margin:0,position:'absolute'}
);
	h.bind(o.event,function(){
	var c=[];
	var d=[];
	k.stop().removeClass('active');
	for(j=0;
	j<k.size();
	j++){
	c[j]=k.eq(j).css(q).replace(/px/,'');
	d[j]=k.eq(j).css(r).replace(/px/,'')}
var e={
}
;
	e[q]=o.max;
	var f=o.max-c[i];
	var g=c[i]/f;
	h.addClass('active').animate(e,{
	step:function(a){
	var b=f!=0?a/f-g:1;
	k.each(function(j){
	if(j!=i){
	k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}
if(j>0&&j<k.size()-1){
	k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}
}
)}
,duration:o.duration,easing:o.easing}
)}
)}
);
	if(!o.sticky){
	container.bind("mouseleave",function(){
	var c=[];
	var d=[];
	k.removeClass('active').stop();
	for(i=0;
	i<k.size();
	i++){
	c[i]=k.eq(i).css(q).replace(/px/,'');
	d[i]=k.eq(i).css(r).replace(/px/,'')}
var e={
}
;
	e[q]=l;
	var f=l-c[0];
	k.eq(0).animate(e,{
	step:function(a){
	var b=f!=0?(a-c[0])/f:1;
	for(i=1;
	i<k.size();
	i++){
	k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');
	if(i<k.size()-1){
	k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}
}
}
,duration:o.duration,easing:o.easing}
)}
)}
}
)}
}
)(jQuery);

CSS代码(main.css):

/* This css file serves as a template for styling your kwicks. Feel free to modify,but please make note of the comments - some of them are important. */
body{background-color:#1d1e21;padding:50px;color:#FFFFFF}
a{color:#FFCC00}
.kwicks{/* recommended styles for kwicks ul container */
list-style:none;position:relative;margin:0;padding:0;}
.kwicks.horizontal li{/* This is optional and will be disregarded by the script. However,it should be provided for non-JS enabled browsers. */
margin-right:5px;/*Set to same as spacing option. */
float:left;}
.kwicks.vertical li{/* This is optional and will be disregarded by the script. However,it should be provided for non-JS enabled browsers. */
margin-bottom:5px;/*Set to same as spacing option. */
}
.kwicks li{float:left;width:125px;height:100px;margin-right:5px;}
#kwick1{background-color:#53b388;background-image:url('meet.gif');}
#kwick2{background-color:#5a69a9;background-image:url('kwicks.gif');}
#kwick3{background-color:#c26468;background-image:url('for.gif');}
#kwick4{background-color:#bf7cc7;background-image:url('jquery.gif');margin-right:none;}
.kwicks.horizontal #kwick_4{margin-right:none;/* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4{margin-bottom:none;/* cancel margin on last kiwck (if you set a margin above) */
}

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