??//封裝一個獲取類的函數(shù)
function?getByClass(clasName,parent){
????var?parent=parent?document.getElementById(parent):document,
????????eles=[],//存儲所有類名為clasName的元素的集合
????????elements=parent.getElementsByTagName("*");//取出所有元素
?
?????for(var?i=0,l=elements.length;i<l;i++){
?????????if?(elements[i].className==clasName)?{
?????????????eles.push(elements[i]);
?????????}
?????}
?????return?eles;
}
window.onload=drag;
function?drag(){
????//拖動
????var????oTitle=getByClass("login_logo_webqq","loginPanel")[0];
?
????oTitle.onmousedown=fnDown;//鼠標(biāo)按下
?
????//關(guān)閉
????var?oClose=document.getElementById("ui_boxyClose"),
????????loginPanel=document.getElementById("loginPanel");
????oClose.onclick=function(){
????????loginPanel.style.display="none";
????}
?
????//點(diǎn)擊顯示下拉狀態(tài)欄
????var?loginState=document.getElementById("loginState"),
????????loginStatePanel=document.getElementById("loginStatePanel"),
????????loginStateShow=document.getElementById("loginStateShow"),
????????txtShow=document.getElementById("login2qq_state_txt"),
????????liState=getByClass("statePanel_li","loginStatePanel"),
????????online=document.getElementById("online");
?
????loginState.onclick=function(){
????????loginStatePanel.style.display="block";
????????for(var?i=0,l=liState.length;i<l;i++){
????????liState[i].onmouseover=function(){
????????????this.style.background="gray";//為什么不能用liState[i]
????????}
????????liState[i].onmouseout=function(){
????????????this.style.background="#FFF";
????????}
????????liState[i].onclick=function(event){
????????????event=event||window.event;
????????????loginStatePanel.style.display="none";
????????????//取消事件冒泡
????????????if(event.stopPropagation){
????????????????event.stopPropagation();
????????????}else{
????????????????event.cancelBubble();
????????????}
?
????????????var?id?=?this.id;
????????????txtShow.innerHTML=getByClass("stateSelect_text",id)[0].innerHTML;
????????????loginStateShow.className="?";
????????????loginStateShow.className="login-state-show?"+this.id;
????????}
????????}
????}
?
}?
?
//鼠標(biāo)按下
function?fnDown(event){
????event=event||window.event;
????var?Odrag=document.getElementById("loginPanel");????
????//先求出鼠標(biāo)點(diǎn)擊時的坐標(biāo)與對話框的距離（是不會變的）
????????//先獲得對話框的距離
????var?disX=event.clientX-Odrag.offsetLeft,
????????????disY=event.clientY-Odrag.offsetTop;
?????????
????//鼠標(biāo)移動時，讓其的上邊距以及左邊距等于鼠標(biāo)的坐標(biāo)
????//這個操作使鼠標(biāo)一直在對話框的左上角
????document.onmousemove=function(event){????
????????event=event||window.event;
????????//?var?disX=event.clientX-Odrag.offsetLeft,
????????//?????disY=event.clientY-Odrag.offsetTop;//不能放在這里?這樣disX會變????????
????????//鼠標(biāo)移動位置,對話框位置改變clientX-disX
????????fnMove(event,disX,disY);
????}
?
????//鼠標(biāo)松開
????document.onmouseup=function(){
????????document.onmousemove=null;
????????document.onmousedown=null;
????}
}
function?fnMove(e,disX,disY){
????e=e||window.event;
????var?Odrag=document.getElementById("loginPanel"),
????????left=e.clientX-disX,
????????top=e.clientY-disY;
?????
????Odrag.style.left=left+"px";
????Odrag.style.top=top+"px";
}

錯誤顯示：liState[i]is indefine