<html>
<style type="text/css">
.d1 {position:relative; top:0; width:100%; height:200px;background-color:silver; overflow:auto;}
.d2 {position:relative; top:0; width:100%; height:200px;background-color:pink; 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>
</head>
<body onload="init()">
<div class="d1" id="d1">jakartaproject.com
</div>
<hr class="hr" id="hr" />
<div class="d2" id="d2">jakartaproject.com
</div>
</body>
</html>
'웹' 카테고리의 다른 글
| 동적 div 생성 (0) | 2009.10.29 |
|---|---|
| drag drop div (0) | 2009.10.29 |
| Anchor Navigation (0) | 2009.10.29 |
| div 라운드 처리 (0) | 2009.10.28 |
| div 라운드 처리 (이미지 없이) (0) | 2009.10.28 |