win8开始菜单界面特效代码

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

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

以下是 win8开始菜单界面特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta charset="utf-8" />
<title>win8开始菜单界面特效代码</title>
<link rel="stylesheet" href="style/style.css" />
<script language="javascript" src="js/mootools-1.4.5.js"></script>
<script language="javascript" src="js/index.js?v1.0"></script>
</head>
<body>
<div class="header" id="header">
	<h1>天意人间</h1>
</div>
<div class="layout-middle" id="layout-middle">
	<div id="channel-list">
		<div id="home" class="channel">
			<div class="channel-title"><h2>天意人间</h2></div>
			<div class="grid d468x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:0px;clear:both;">
				天意人间
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:238px;">
				天意人间	
			</div>
		</div>
		<div id="news" class="channel">
			<div class="channel-title"><h2>资讯</h2></div>
			<div class="grid d468x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:0px;clear:both;">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:238px;">
				天意人间	
			</div>
		</div>
		<div id="article" class="channel">
			<div class="channel-title"><h2>下载</h2></div>
			<div class="grid d468x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:0px;clear:both;">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:238px;">
				天意人间	
			</div>
		</div>
		<div id="download" class="channel">
			<div class="channel-title"><h2>关于</h2></div>
			<div class="grid d468x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x308">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:0px;clear:both;">
				天意人间	
			</div>
			<div class="grid g230x150" style="position:absolute;top:366px;left:238px;">
				天意人间	
			</div>
		</div>
	</div>
	<div id="pre"></div>
	<div id="next"></div>
</div>
</body>
</html>

JS代码(index.js):

var whichchannel=0;
	document.addEvent('domready',function(){
	//隐藏网站名称$("header").setStyle("display","none");
	//定位resetPosition();
	window.onresize=resetPosition;
	//随机背景色var colors=['FF3300','6600CC','00CC33','00CCFF','9933CC','66FFCC'];
	$$(".grid").each(function(item){
	item.setStyle('backgroundColor','#'+colors.getRandom());
}
);
	//滚动事件if(whichchannel==0) $("pre").setStyle("display","none");
	var myFx=new Fx.Tween("layout-middle",{
	duration:500,onComplete:function(){
	if(whichchannel>0) $("pre").setStyle("display","block");
	if(whichchannel<3) $("next").setStyle("display","block");
}
}
);
	document.addEvent("mousewheel",function(e){
	if(e.wheel<0){
	toLeft(myFx);
}
else{
	toRight(myFx);
}
}
);
	$("pre").addEvent("click",function(){
	toRight(myFx);
}
);
	$("next").addEvent("click",function(){
	toLeft(myFx);
}
);
}
);
	function resetPosition(){
	var clientWidth=document.body.clientWidth;
	clientWidth=clientWidth.toInt();
	$$(".layout-middle")[0].style.marginLeft=(clientWidth-950)/2-66;
}
function toLeft(myFx){
	if(myFx.isRunning()) return;
	if(whichchannel==3) return;
	whichchannel++;
	$("pre").setStyles({
	"display":"none","marginLeft":$("pre").getStyle("marginLeft").toInt()+1040}
);
	$("next").setStyles({
	"display":"none","marginLeft":$("next").getStyle("marginLeft").toInt()+1040}
);
	mg=$$(".layout-middle")[0].getStyle("marginLeft");
	myFx.start("marginLeft",mg.toInt()-1040);
}
function toRight(myFx){
	if(myFx.isRunning()) return;
	if(whichchannel==0) return;
	whichchannel--;
	$("pre").setStyles({
	"display":"none","marginLeft":$("pre").getStyle("marginLeft").toInt()-1040}
);
	$("next").setStyles({
	"display":"none","marginLeft":$("next").getStyle("marginLeft").toInt()-1040}
);
	mg=$$(".layout-middle")[0].getStyle("marginLeft");
	myFx.start("marginLeft",mg.toInt()+1040);
}

CSS代码(style.css):

body{background:url(../image/bodybg.jpg);color:#fff;margin:0px;padding:0px;overflow:hidden;font-family:\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,\5E7C\5706,Arial,Verdana;}
.layout-middle{width:5000px;height:580px;position:absolute;top:50%;margin-top:-290px;}
.channel{width:960px;height:560px;float:left;margin-right:80px;font-size:28px;position:relative;}
#channel-list{margin-left:66px;}
.channel-title h2{margin:0px;font-size:36px;font-weight:normal;height:50px;}
.grid{margin:0px 8px 8px 0px;float:left;}
.d468x308{width:468px;height:308px;}
.g230x308{width:230px;height:308px;}
.g230x150{width:230px;height:150px;}
#pre{cursor:pointer;position:absolute;top:50px;left:0px;width:36px;height:36px;background-image:url('../image/bg_image_3.png');}
#next{cursor:pointer;position:absolute;top:50px;left:1037px;width:36px;height:36px;background-image:url("../image/bg_image_3.png");background-position:center 136px;}

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