티스토리 뷰
<html>
<head>
<style type="text/css">
.d1 {position:relative; top:0; width:100%; height:200px;
background-color:7DC800; overflow:auto;}
.d2 {position:relative; top:0; width:100%; height:200px;
background-color:FFFFC5; overflow:auto;}
#hr {cursor:pointer;}
</style>
<script type="text/javascript">
var startpos, diffpos=0;
var erlaubt = false;
function on_mouse_down(e) {
if (!document.all)
startpos = e.screenY + diffpos;
else
startpos = event.clientY + diffpos;
erlaubt = true;
return false;
}
function on_mouse_up(e) {
erlaubt = false;
return false;
}
function on_mouse_move(e) {
if (erlaubt) {
if (!document.all)
jetztpos = e.screenY;
else
jetztpos = event.clientY;
diffpos = startpos-jetztpos;
if (diffpos > -200 && diffpos < 200) {
document.getElementById("d1").style.height = 200 - diffpos + "px";
document.getElementById("d2").style.height = 200 + diffpos + "px";
}
}
}
function init() {
document.getElementById("hr").onmousedown = on_mouse_down;
document.onmouseup = on_mouse_up;
document.onmousemove = on_mouse_move;
}
</script>
</head>
<body onload="init()">
<div class="d1" id="d1">
1<br />
1<br />
1<br />
</div>
<hr class="hr" id="hr" />
<div class="d2" id="d2">
2<br />
2<br />
2<br />
</div>
</body>
</html>
<head>
<style type="text/css">
.d1 {position:relative; top:0; width:100%; height:200px;
background-color:7DC800; overflow:auto;}
.d2 {position:relative; top:0; width:100%; height:200px;
background-color:FFFFC5; overflow:auto;}
#hr {cursor:pointer;}
</style>
<script type="text/javascript">
var startpos, diffpos=0;
var erlaubt = false;
function on_mouse_down(e) {
if (!document.all)
startpos = e.screenY + diffpos;
else
startpos = event.clientY + diffpos;
erlaubt = true;
return false;
}
function on_mouse_up(e) {
erlaubt = false;
return false;
}
function on_mouse_move(e) {
if (erlaubt) {
if (!document.all)
jetztpos = e.screenY;
else
jetztpos = event.clientY;
diffpos = startpos-jetztpos;
if (diffpos > -200 && diffpos < 200) {
document.getElementById("d1").style.height = 200 - diffpos + "px";
document.getElementById("d2").style.height = 200 + diffpos + "px";
}
}
}
function init() {
document.getElementById("hr").onmousedown = on_mouse_down;
document.onmouseup = on_mouse_up;
document.onmousemove = on_mouse_move;
}
</script>
</head>
<body onload="init()">
<div class="d1" id="d1">
1<br />
1<br />
1<br />
</div>
<hr class="hr" id="hr" />
<div class="d2" id="d2">
2<br />
2<br />
2<br />
</div>
</body>
</html>
댓글