创建一个可移动的层
大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪也没有,从JAVAEYE上搜到了一篇文章,可是还是看不懂.有谁知道这个原理,可是讲讲吗(最好写一点面向对象的js代码)?我想弄懂之后,创建一个JS 工具类,用来创建一个notice对话框.
谢谢您!!!!http://www.agoit.com/images/smiles/icon_redface.gif
javaeye上一网友的文章,他的地址我不记得了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>.divcc{ position:absolute; border: 1px #FF99FF solid; background-color:#FFFF99; height:auto; width:300px; z-index:1000; } .divdd{ position:absolute; border: 0px; background-color:#FFFF80; height:auto; width:300px; z-index:999; } </style><script>function cursorover(){ document.getElementById("cc").style.cursor="move"; } function cursorout(){ document.getElementById("cc").style.cursor="auto"; } //可移动的层 var dragapproved=false; var z,x,y; function move(){ if (event.button==1&&dragapproved){ z.style.pixelLeft=temp1+event.clientX-x; z.style.pixelTop=temp2+event.clientY-y; return false; } if(event.button==2){ alert("别复制！！"); return false; } } function drags(){ if (!document.all) return; if (event.srcElement.className=="divcc"){ dragapproved=true; z=event.srcElement; temp1=z.style.pixelLeft; temp2=z.style.pixelTop; x=event.clientX; y=event.clientY; document.onmousemove=move; } } document.onmousedown=drags; document.onmouseup=new Function("dragapproved=false"); //-------------------------------------------------------------------------------------------------------------------------- //初始化层位置 function init(){ var w =document.body.clientWidth; var h =document.body.clientHeight; var divObj = document.getElementById("cc"); divObj.style.left = w/2; divObj.style.top = h/2;alert('w:'+w);alert('h:'+h); } //最大化 function max(){ document.getElementById("dd").style.display="inline"; var divObj = document.getElementById("cc"); divObj.style.width="300px"; var w =document.documentElement.clientWidth; var h =document.documentElement.clientHeight; divObj.style.left = w/2; divObj.style.top = h/2; } //最小化 function min(){ document.getElementById("dd").style.display="none"; var divObj = document.getElementById("cc"); var w =document.documentElement.clientWidth; //获得网页可见区域的宽度（不包括边框） var h =document.documentElement.clientHeight; //获得网页可见区域的高度（不包括边框） divObj.style.width="150px"; //设置层宽度 var myw = divObj.offsetWidth; //获得自身的宽度（包括边框） var myh = divObj.offsetHeight; //获得自身的高度（包括边框） var curw = w - myw; var curh = h - myh; divObj.style.left = curw; divObj.style.top = curh; } //关闭 function clo(){ document.getElementById("cc").style.display="none"; }</script></HEAD><BODY > <div id="cc"onmouseout="cursorout()" class="divcc"> <span style="height:20px;" >最大化</span> <span >最小化</span> <span >关闭</span><br/> <div id="dd" class="divdd"> <table border="1px" cellpadding="0" cellspacing="0" bordercolor="#FF33CC" width="300px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table> </div> </div> </BODY></HTML>
document.documentElement与document.body是同一个对象吗?
答案是:
原来HTML里是document.body
XHTML里是document.documentElement
都指的是 <body >节点(OR元素)
可以这样兼容：
function getBodyObj() { return (document.documentElement) ? document.documentElement : document.body ; }
页:
[1]