素材网 素材网

jquer制作Win8 Metro风格网址导航页面切换特效

下载资源()次

阅读次数()次

发布时间:2014-05-15

jquer制作Win8 Metro风格网址导航页面切换特效
分享到:

用法简介:

来源:xw素材网

jquer制作Win8 Metro风格网址导航页面切换特效。
文件引用:

<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var box_h=$("#metro_box").height();
	var box_w=$("#metro_box").width();
	$("#metro_box").css("margin-top",(($(window).height()-box_h)/2)-10+"px");
	//var img_h=$(".arr_left img").height();
	//var img_w=$(".arr_left img").width();
	//$(".prev").css("position","absolute").css("left","10px").css("top",($(window).height()-img_h)/2);
	//$(".next").css("position","absolute").css("right","10px").css("top",($(window).height()-img_h)/2);
	//链接在新窗口打开
	$(".a_link dd a").attr("target","_blank");
	$(".a_link ul li>a").hover(function(){
		var a_href=$(this).attr("href");			
		$(this).siblings().find("a").attr("href",a_href);
	});
	//切屏-----------------------------------------------------------------
	$("#top dl dd a").click(function(){
		var now_class=$(this).attr("class");	
		$("#top dl dd a.a_index").attr("class","a_index");
		$("#top dl dd a.a_mzdw").attr("class","a_mzdw");
		$("#top dl dd a.a_spyy").attr("class","a_spyy");
		$("#top dl dd a.a_xwzx").attr("class","a_xwzx");
		$("#top dl dd a.a_gwtb").attr("class","a_gwtb");
		$("#top dl dd a.a_yxyl").attr("class","a_yxyl");
		$("#top dl dd a.a_sygj").attr("class","a_sygj");
		$("#top dl dd a.a_yszy").attr("class","a_yszy");
		$(this).attr("class",now_class).addClass(now_class+"_h");			
		var index=$(this).index();
		$("#metro_box dd").hide();
		$("#metro_box dd").eq(index).toggle(100);
		if(index==1){
			$("body").attr("class","bg0");	
		}
		switch (index){
			case 0:
				$("body").attr("class","bg");						
				break;
			case 1:
				$("body").attr("class","bg0");					
				break;
			case 2:
				$("body").attr("class","bg1");						
				break;
			case 3:
				$("body").attr("class","bg2");					
				break;
			case 4:
				$("body").attr("class","bg3");					
				break;
			case 5:
				$("body").attr("class","bg4");						
				break;	
			case 6:
				$("body").attr("class","bg5");						
				break;	
			default :
				$("body").attr("class","bg6");						
		}
		<!--[if IE 6]>$("#metro_box dd").eq(index).show(300);<![endif]-->			
	});
});
</script>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。