学习笔记,方便以后查阅。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/***********************************页面布局*********************************/
body, html {
margin: 0px;
}
#header {
height: 120px;
width: 100%;
position: absolute;
top: 0;
background-color: blueviolet;
}
#middle {
position: absolute;
width: 100%;
height: auto;
top: 120px;
bottom: 30px;
}
#m_left {
width: 250px;
float: left;
height: 100%;
background-color: #808080;
}
#m_right {
width: 250px;
height: 100%;
float: right;
background-color: #808080;
}
#m_center {
height: 100%;
margin: auto;
overflow: hidden;
background-color: #ffd800;
}
#footer {
height: 30px;
width: 100%;
position: absolute;
bottom: 0;
background-color: aqua;
}
/*以上是布局页头、页尾还有中间部分。页头页尾固定高度,中间高度自由伸缩。中间部分又分为三列,左右两列宽度固定,中间一列宽度自由伸缩*/
/******************************************收起右栏、显示右栏***************************************/
/*收起左栏、显示左栏*/
#ShrinkLeftColumn {
background: url(images/mapview.png) no-repeat -7px -9px;
cursor: pointer;
width: 16px;
height: 72px;
overflow: hidden;
left: 250px;
top: 50%;
position: absolute;
z-index: 9997;
}
.gray_right, .gray_left {
width: 8px;
height: 15px;
position: absolute;
top: 28px;
left: 5px;
}
.gray_right {
/*灰色 箭头向右*/
background: url(images/mapview.png) no-repeat -37px -47px;
}
.gray_left {
/*灰色 箭头向左*/
background: url(images/mapview.png) no-repeat -37px -4px;
}
.green_right {
/*绿色 箭头向右*/
background: url(images/mapview.png) no-repeat -37px -68px;
}
.green_left {
/*绿色 箭头向左*/
background: url(images/mapview.png) no-repeat -37px -25px;
}
/******************************鼠标移动到照片弹出div遮盖照片**************************/
#imgContainer {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
#imgContainer .desc {
width: 170px;
height: 180px;
padding: 20px 0 0 30px;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
position: absolute;
bottom: -200px;
}
#imgContainer .desc div {
color: #fff;
}
/****************************************div遮盖全屏****************************************/
#cover {
display:none;
}
#CoverFullScreen {
background-color: #000000;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
z-index: 9998;
}
#CoverFullScreen_child {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
z-index: 99999;
border: 10px solid red;
background-color: white;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function () {
//***************************************控制左栏是否显示****************************
$("#ShrinkLeftColumn").mouseover(function () {
if ($("#m_left").is(":visible")) {
$(this).children().addClass('green_left');
}
else {
$(this).children().addClass('green_right');
}
});
$("#ShrinkLeftColumn").mouseout(function () {
if ($("#m_left").is(":visible")) {
$(this).children().removeClass('green_left');
}
else {
$(this).children().removeClass('green_right');
}
});
$("#ShrinkLeftColumn").click(function () {
if ($("#m_left").is(":visible")) {
$("#m_left").hide();
document.getElementById("ShrinkLeftColumn").title = "展开左栏";
$("#m_center").css("width", "auto");
$("#ShrinkLeftColumn").css("left", "0px");
$(this).children().removeClass();
$(this).children().addClass('gray_right');
}
else {
$("#m_left").show();
$("#m_center").css("width", "auto");
$("#ShrinkLeftColumn").css("left", "250px");
document.getElementById("ShrinkLeftColumn").title = "收起左栏";
$(this).children().removeClass();
$(this).children().addClass('gray_left');
}
});
//*******************************鼠标移动到照片弹出div遮盖照片*******************************
$("#imgContainer").hover(
function () {
$(this).find(".desc").stop().delay(50).animate({ "bottom": 0 }, 300)
},
function () {
$(this).find(".desc").stop().animate({ "bottom": -200 }, 300)
}
)
});
function ExitOrFullScreen() {
var e = document.getElementById('btnAllScreen');
var text = e.value;
if (text === "全屏") {
e.value = "退出全屏";
$("#m_left").hide();
$("#m_right").hide();
$("#header").hide();
$("#footer").hide();
$("#ShrinkLeftColumn").hide();
$("#middle").css("top", 0);
$("#middle").css("bottom", 0);
}
else if (text === "退出全屏") {
e.value = "全屏";
$("#m_left").show();
$("#m_right").show();
$("#header").show();
$("#footer").show();
$("#ShrinkLeftColumn").show();
$("#middle").css("top", 120);
$("#middle").css("bottom", 30);
}
}
</script>
</head>
<body>
<div id="cover">
<div id="CoverFullScreen">
</div>
<div id="CoverFullScreen_child">
<table>
<tr>
<td>用户名:</td>
<td>
<input id="Text1" type="text" /></td>
</tr>
<tr>
<td>密码:</td>
<td>
<input id="Text2" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input id="Submit1" type="submit" value="submit" />
<input id="btnCloseCover" type="button" value="关 闭" οnclick="document.getElementById('cover').style.display = 'none';" />
</td>
</tr>
</table>
</div>
</div>
<div id="header">
</div>
<div id="middle">
<div id="ShrinkLeftColumn" title="收起左栏">
<div class="gray_left"></div>
</div>
<div id="m_left">
</div>
<div id="m_right">
</div>
<div id="m_center">
<input id="btnAllScreen" type="button" value="全屏" οnclick="ExitOrFullScreen();" />
<input id="btnLogin" type="button" value="登录" οnclick="document.getElementById('cover').style.display = 'block';" />
<div id="imgContainer">
<img src="images/1.jpg" alt="" />
<div class="desc">
<div>
图片详细信息
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>