javascript:鼠标移动改变编辑器高度的特效
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>