js 仿照google extension网站-JavaSript-爱易网页

js 仿照google extension网站

日期：2014-05-16　浏览次数：20540 次

js 模仿google extension网站

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
		$(function(){
				
				
				// $("div_left1").css("top",0);
				// $("div_left1").css("left",$("#div_left").position().left+$("#div_left").width());
				$("#div_right").width($(document).width()-442);	//442表示div_left:300+docuemnt.padding的宽度+div_left.padding的宽度
				$("#div_center").width($(document).width()-442);
				$("#div_right").css("left",$("#div_left").width()+50+5+20);		//50表示body.padding 距离左边5px	20表示div_left.padding 
				$("#div_center").css("left",$("#div_left").width()+50+5+20);	
				$("#div_center").css("top",$("#div_right").height()+2);
				$(window).bind('resize',function(){
					$("#div_right").width($(document).width()-442);	//442表示div_left:300+docuemnt.padding的宽度+div_left.padding的宽度
					$("#div_center").width($(document).width()-442);
					$("#div_right").css("left",$("#div_left").width()+50+5+20);		//50表示padding 距离左边5px
				$("#div_center").css("left",$("#div_left").width()+50+5+20);		
					$("#div_center").css("top",$("#div_right").height()+2);
				});
		});
		
</script>
</head>

<body style="margin:0px;padding:0px 50px 0px 50px;text-align:center">

		

			
			<div id="div_left" style="border:1px solid #99bbe8;background-color:#ececec;width:300px;height:100%;float:left;margin:0px;position: fixed; top:0px;
				padding:10px 10px 10px 10px;z-index:1000">
				<div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第一商店</div>
				<div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第二商店</div>
				<div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第三商店</div>
				<div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第四商店</div>
				<div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第五商店</div>
				<div style="width:278px;height:20px;border:1px solid #ff0000;margin-top:10px;font-famliy:font-family:微软雅黑;cursor:hand;text-align:left;padding-left:10px">第六商店</div>
			</div>
			<div id="div_right" style="border:1px solid #99bbe8;height:100px;position: fixed; top:0px;margin-right:50px;background-color:#99bbe8;z-index:100;"></div>
			<div id="div_center" style="border:1px solid #ff0000;height:2000px;position:absolute;;background-color:#ececec;">
				
				<div style="width:100%;height:1000px;">
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
					<div id="div_center" style="border:1px solid #ff0000;height:150px;width:100%"></div>
				</div>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js 仿照google extension网站

相关资料更多>

推荐阅读更多>