js左右大小变化
点左边左边变大。点右边右边大左边小
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
#wai{
width:100%;
height:500px;
}
#nei_1{
height:500px;
background-color:blue;
float:left;
}
#nei_2{
height:500px;
background-color:#6C0;
float:left;
}
#anniu{
width:50px;
height:50px;
background-color:red;
position:absolute;
top:225px;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei_1" style="width:200px;" onclick="Hua()"></div>
<div id="nei_2" style="width:700px;" onclick="Hui()"></div>
</div>
<div id="anniu" onclick="Hua()" style="left:175px;"></div>
</body>
<script type="text/javascript">
//蓝色的长度变大
//绿色的长度变小
//红色框的位置
var id;
function Hua()
{
id = window.setInterval("Dong()",20);
}
//每一次调用一次，改变的样式
function Dong()
{
//获取蓝色的元素
var left = document.getElementById("nei_1");
//获取蓝色的宽度
var lw = left.style.width;
//判断宽度是否超出
if(parseInt(lw.substr(0,lw.length-2))>700)
{
window.clearInterval(id);
return;
}
//获取数字加2
lw = parseInt(lw.substr(0,lw.length-2))+2;
//修改样式
left.style.width = lw+"px";
//绿色的修改
var right = document.getElementById("nei_2");
var rw = right.style.width;
rw = parseInt(rw.substr(0,rw.length-2))-2;
right.style.width = rw+"px";
//红色的修改
var an = document.getElementById("anniu");
var al = an.style.left;
al = parseInt(al.substr(0,al.length-2))+2;
an.style.left = al+"px";
}
var ad;
function Hui()
{
ad = window.setInterval("Lai()",20);
}
function Lai()
{
//绿色的修改
var right = document.getElementById("nei_2");
var rw = right.style.width;
if(parseInt(rw.substr(0,rw.length-2))>700)
{
window.clearInterval(ad);
return;
}
rw = parseInt(rw.substr(0,rw.length-2))+2;
right.style.width = rw+"px";
//红色的修改
var an = document.getElementById("anniu");
var al = an.style.left;
al = parseInt(al.substr(0,al.length-2))-2;
an.style.left = al+"px";
//获取蓝色的元素
var left = document.getElementById("nei_1");
//获取蓝色的宽度
var lw = left.style.width;
lw = parseInt(lw.substr(0,lw.length-2))-2;
left.style.width = lw+"px";
}
</script>
