js 仿照google extension网站
日期：2014-05-16 浏览次数：20427 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
