87,915
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<style>
.shadowDivA {
width: 200px;
height: 100%;
position: absolute;
top: 0px ; left : 0px;
background-color: #00F;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivB {
width: 500px;
height: 100%;
position: absolute;
top: 0px ; left : 220px;
background-color: #0F0;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivM {
width: 20px;
height: 100%;
position: absolute;
top: 0px ; left : 200px;
background-color: #F00 ;
filter: alpha(opacity = 70);
opacity: 0.7;
}
</style>
</head>
<script type="text/javascript">
var aWidth = 200 ;
var bWidth = 500 ;
var mLeft = 200 ;
var bLeft = 220 ;
var oldX ;
var flag = false ;
function down(obj){
oldX = event.clientX ;
flag = true ;
}
function up(){
flag = false ;
}
function move(obj){
if(flag){
var obj1 = document.getElementById("a") ;
var obj2 = document.getElementById("b") ;
var newX = event.clientX ;
var x = newX - oldX ;
oldX = newX ;
aWidth += x ;
bWidth -= x ;
//mWidth += x ;
mLeft += x ;
bLeft += x ;
obj2.innerHTML = "x="+x+" aw="+aWidth+" bw="+bWidth+" ml="+mLeft+" bl="+bLeft ;
obj1.style.width = aWidth + "px" ;
obj.style.left = mLeft + "px" ;
obj2.style.width = bWidth + "px" ;
obj2.style.left = bLeft + "px" ;
}
}
</script>
<body>
<div id="a" class="shadowDivA"></div>
<div class="shadowDivM" onmousedown="down(this);" onmouseout="up();" onmouseup="up();" onmousemove="move(this);"></div>
<div id="b" class="shadowDivB"></div>
</body>
</html>