1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 #box{
6 width:500px;
7 height:5px;
8 border:solid 0px green;
9 position:absolute;
10 margin:0px;
11 overflow:hidden;
12 background-color:#cccccc;
13 }
14 #box2{
15 width:500px;
16 height:5px;
17 border:solid 0px red;
18 position:absolute;
19 margin:0px;
20 overflow:hidden;
21 background-color:#cccccc;
22 }
23 #txtarea{
24 width:500px;
25 height:220px;
26 margin:0px;
27 border:solid 1px #aaaaaa;
28 border-bottom-width:0px;
29 }
30 </style>
31 </head>
32 <body>
33 <textarea id='txtarea'></textarea>
34 <div onmousemove="fun();" id='box'></div>
35 <div id='box2' onmousemove="fun2();"></div>
36 <script language='javascript'>
37 function fun(){
38 object('box').style.top=object('box').offsetTop+event.offsetY+'px';
39 object('box2').style.top=object('box2').offsetTop+event.offsetY+'px';
40 object('txtarea').style.height=(getHeight()+event.offsetY)+'px';
41 }
42 function fun2(){
43 if(box1_top<object('box').offsetTop){
44 object('box2').style.top=object('box2').offsetTop-(5-event.offsetY)+'px';
45 object('box').style.top=object('box').offsetTop-(5-event.offsetY)+'px';
46 object('txtarea').style.height=(getHeight()-(5-event.offsetY))+'px';
47 }
48 }
49 function object(str){
50 return document.getElementById(str);
51 }
52 function getHeight(){
53 return object('txtarea').offsetHeight;
54 }
55 var box1_top;
56 window.onload=function(){
57 object('box').style.left=object('txtarea').offsetLeft+'px';
58 object('box').style.top=(object('txtarea').offsetTop+220)+'px';
59 object('box2').style.left=object('txtarea').offsetLeft+'px';
60 object('box2').style.top=(object('box').offsetTop+5)+'px';
61 box1_top=object('box').offsetTop;
62 }
63 </script>
64
65 </body>
66 </html>
