<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<TITLE> New Document </TITLE>
<style>
#leftDiv,#rightDiv{
width:300px;
float:left;
border:1px solid #000;
height:400px;
}
#barDiv{
float:left;
width:10px;
height:400px;
background:#000;
}
</style>
<script type="text/javascript">function onLoadPage()
{
var l = document.getElementById("leftDiv");
var r = document.getElementById("rightDiv");
var bar = document.getElementById("barDiv");
var move=false;
var offsetL,offsetR,LlastWidth,RlastWidth;
var leftL = getLeft(l);
alert("l=" + l);
var rightL = getLeft(r) + r.offsetWidth;
var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
bar.onmouseover=function(){
this.style.cursor = "col-resize";
}
bar.onmouseout=function(){
this.style.cursor = "default";
}
bar.onmousedown=function(e){
move=true;
e= e || window.event;
if(ff)
{
var mousePos =mouseCoords(e);
//layerX鼠标位置。
offsetL = e.clientX - mousePos.x;
offsetR = this.offsetWidth - offsetL;
/*
if(document.documentElement.scrollTop > 0)
{
y = evt.layerY - document.documentElement.scrollTop;
}
if(document.documentElement.scrollLeft > 0)
{
x = evt.layerX - document.documentElement.scrollLeft;
}
*/
}
if(ie)
{
this.setCapture();
offsetL = e.offsetX;
offsetR = this.offsetWidth - offsetL;
}
}
bar.onmousemove=function(e){
if(move == false) return;
e= e || window.event;
var mX = e.x ? e.x : e.pageX;
var mousePos =mouseCoords(e);
var left = document.getElementById("leftDiv");
var right = document.getElementById("rightDiv");
left.style.width = mousePos.x - leftL - offsetL + "px";
right.style.width = rightL - mousePos.x - offsetR + "px";
}
bar.onmouseup = function(){
this.releaseCapture();
move = false;
}
function getLeft(leftDiv)
{
var divLeft = document.getElementById("leftDiv"); var l = divLeft.offsetLeft;
alert(l);
while(divLeft=divLeft.offsetParent)l+=divLeft.offsetLeft;
return l;
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
}function testClick()
{
var divTest = document.getElementById("test");
alert("divTest="+divTest);
}
</script>
</HEAD> <BODY onLoad="onLoadPage();">
<table>
<tr>
<td>
<div id="leftDiv">left DIV </div>
<div id="barDiv"> </div>
<div id="rightDiv">right DIV </div>
</td>
</tr>
<tr><td><a href="#" onClick="testClick();"> <div id="test">for the test</div></a></td></tr>
</table>
</BODY>
</HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<TITLE> New Document </TITLE>
<style>
#leftDiv,#rightDiv{
width:300px;
float:left;
border:1px solid #000;
height:400px;
}
#barDiv{
float:left;
width:10px;
height:400px;
background:#000;
}
</style>
<script type="text/javascript">function onLoadPage()
{
var l = document.getElementById("leftDiv");
var r = document.getElementById("rightDiv");
var bar = document.getElementById("barDiv");
var move=false;
var offsetL,offsetR,LlastWidth,RlastWidth;
var leftL = getLeft(l);
alert("l=" + l);
var rightL = getLeft(r) + r.offsetWidth;
var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
bar.onmouseover=function(){
this.style.cursor = "col-resize";
}
bar.onmouseout=function(){
this.style.cursor = "default";
}
bar.onmousedown=function(e){
move=true;
e= e || window.event;
if(ff)
{
var mousePos =mouseCoords(e);
//layerX鼠标位置。
offsetL = e.clientX - mousePos.x;
offsetR = this.offsetWidth - offsetL;
/*
if(document.documentElement.scrollTop > 0)
{
y = evt.layerY - document.documentElement.scrollTop;
}
if(document.documentElement.scrollLeft > 0)
{
x = evt.layerX - document.documentElement.scrollLeft;
}
*/
}
if(ie)
{
this.setCapture();
offsetL = e.offsetX;
offsetR = this.offsetWidth - offsetL;
}
}
bar.onmousemove=function(e){
if(move == false) return;
e= e || window.event;
var mX = e.x ? e.x : e.pageX;
var mousePos =mouseCoords(e);
var left = document.getElementById("leftDiv");
var right = document.getElementById("rightDiv");
left.style.width = mousePos.x - leftL - offsetL + "px";
right.style.width = rightL - mousePos.x - offsetR + "px";
}
bar.onmouseup = function(){
this.releaseCapture();
move = false;
}
function getLeft(leftDiv)
{
var divLeft = document.getElementById("leftDiv"); var l = divLeft.offsetLeft;
alert(l);
while(divLeft=divLeft.offsetParent)l+=divLeft.offsetLeft;
return l;
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
}function testClick()
{
var divTest = document.getElementById("test");
alert("divTest="+divTest);
}
</script>
</HEAD> <BODY onLoad="onLoadPage();">
<table>
<tr>
<td>
<div id="leftDiv">left DIV </div>
<div id="barDiv"> </div>
<div id="rightDiv">right DIV </div>
</td>
</tr>
<tr><td><a href="#" onClick="testClick();"> <div id="test">for the test</div></a></td></tr>
</table>
</BODY>
</HTML>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货