两侧伸缩效果

来源：互联网发布：淘宝如何搜索福利资源编辑：程序博客网时间：2024/04/29 17:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px;overflow:scroll;}
.main{
width:100%;
margin:0;
clear:both;
}
.map-left{
border-right:1px solid #ccc;
height:100%;
width:399px;
float:left;
position:relative;
background:#0099FF;
}
.ss{
background:#FCF7F7;
border-radius:3px;
position:absolute;
height:65px;
width:18px;
top:50%;
z-index:1000;
cursor:pointer;
}
.ss img{
margin-top: 25px;
width: 12px;
}
.left-close{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
right:-18px;
}
.left-open{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
left:0;
display:none;
}
.right-open{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
right:0;
display:none;
}
.right-close{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
left:0;
}
.map-main{
float:left;
position:relative;
background:#CC3399;
height: 100%;
}
.map-right{
border-left:1px solid #ccc;
height:100%;
width:399px;
float:left;
position:relative;
cursor:pointer;
overflow-y:scroll;
background:#FFFF33;
}
</style>

</head>

<body>
<div class="main" id="main">
<div class="map-left" id="map-left">
<div>....</div>
<div id="left-close" class="ss left-close" onclick="leftClose()" title="收起左栏">
<img src="images/xz1.png">
</div>
</div>
<div class="map-main" id="map-main">
<div id="left-open" class="ss left-open" onclick="leftOpen()" title="显示左栏">
<img src="images/xy1.png">
</div>
<div>....</div>
<div id="right-open" class="ss right-open" onclick="rightOpen()" title="显示右栏">
<img src="images/xz1.png">
</div>
</div>
<div class="map-right" id="map-right">
<div id="right-close" class="ss right-close" onclick="rightClose()" title="收起右栏">
<img src="images/xy1.png">
</div>
<div>....</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
setMapWidth();
window.onresize = adjust;
adjust();
});

function setMapWidth(){
var lh = document.getElementById("map-left").offsetWidth;
var rh = document.getElementById("map-right").offsetWidth;
var map_main = document.getElementById("map-main");
map_main.style.width = document.getElementById("main").offsetWidth - lh-rh;
}

function adjust(){
var h = document.body.clientHeight;
var w = document.body.clientWidth;
$("#main").css("height",h);
var display = $("#map-right").css("display");
if (display == "none"){
$("#map-main").css("width",w-400);
}
else {
$("#map-main").css("width",w-800);
}
}

function leftClose(){
$("#map-left").animate({marginLeft:"-400px"}, {duration:300});
$("#map-main").animate({width:"+=400px"},{duration:300});
$("#left-open").css("display", "block");
}

function leftOpen(){
$("#map-left").animate({marginLeft:"0"}, {duration:300});
$("#map-main").animate({width:"-=400px"},{duration:300});
$("#left-open").css("display", "none");
}

function rightClose(){
$("#map-right").css("display", "none");
$("#map-main").animate({width:"+=400px"},{duration:300});
$("#right-open").css("display", "block");
}

function rightOpen(){
$("#map-right").css("display", "block");
$("#map-main").animate({width:"-=400px"},{duration:300});
$("#right-open").css("display", "none");
}
</script>
</body>
</html>

0 0