function getClass(clsName,parent){
?? ?var oParent=parent?document.getElementById(parent):document,
?? ??? ?eles=[],
?? ??? ?ele=oParent.getElementsByTagName('*');
?? ??? ?for (var i = 0,len=ele.length; i<1; i++) {
?? ??? ??? ?if (ele[i].className===clsName) {
?? ??? ??? ??? ?eles.push(ele[i]);
?? ??? ??? ?}
?? ??? ?}
?? ??? ?return eles;
}

window.onload=drag;

function drag(){
?? ?var close=getClass('close','ding')[0];//返回的是數(shù)組，所以一定要加后綴
?? ?var area=document.getElementById('webqq');//移動(dòng)區(qū)域
?? ?var name=document.getElementById('need');//賬號(hào)框處理
?? ?var state=document.getElementById('state');
?? ?var?? ?shows=document.getElementById('shows');
?? ?var txt=document.getElementById('txt');
?? ?var?? ?panel=document.getElementById('panel');
?? ?var?? ?lis=panel.getElementsByTagName('li');
?? ?close.onclick=unShow; //關(guān)閉qq面板
?? ?area.onclick=fnDown; //確定鼠標(biāo)位置與面板邊框的距離
?? ?name['onfocus']=hiddenTxt;? //賬號(hào)框處理
?? ?name['onblur']=showTxt;?? //賬號(hào)框處理

?? ?//狀態(tài)列表下拉
?? ?state.onclick=function(e){
?? ??? ?e=e||window.event;
?? ??? ?showList(e);
?? ?}
?? ?//列表項(xiàng)樣式設(shè)計(jì),包括劃過(guò) 劃出和點(diǎn)擊,其中點(diǎn)擊主要是用來(lái)變換狀態(tài)用的
?? ?for(var i=0,len=lis.length;i<len;i++){
?? ??? ?lis[i].onmouseover=function(){
?? ??? ??? ?this.style.background='#567';
?? ??? ?}
?? ??? ?lis[i].onmouseout=function(){
?? ??? ??? ?this.style.background='#fff';
?? ??? ?}
?? ??? ?lis[i].onclick=function(e){
?? ??? ??? ?e=e||window.event;
?? ??? ??? ?//一定要阻止事件冒泡，firstly
?? ??? ??? ?if(e.stopPropagation){
?? ??? ??? ??? ?e.stopPropagation();
?? ??? ??? ?}else{
?? ??? ??? ??? ?e.cancelBubble=true;
?? ??? ??? ?}
?? ??? ??? ?var id=this.id;
?? ??? ??? ?var L=document.getElementById(id),
?? ??? ??? ??? ?cTxt=L.getElementsByTagName('div')[0].innerHTML;
?? ??? ??? ?panel.style.display='none';
?? ??? ??? ?txt.innerHTML=cTxt;
?? ??? ??? ?shows.className='';
?? ??? ??? ?shows.className='logo-state-show '+id;
?? ??? ?}
?? ?}
?? ?document.onclick=function(){
?? ??? ?panel.style.display='none';
?? ?}
}
//關(guān)閉QQ面板
function unShow(){
?? ??? ?document.getElementById('box').style.display='none';
}

//賬號(hào)欄設(shè)計(jì)
function hiddenTxt(){
?? ??? ?if (this.value=='QQ號(hào)碼或E-Mail') {
?? ??? ??? ?this.value='';
?? ??? ?}
?? ?}
function showTxt(){
?? ??? ?if (this.value=='') {
?? ??? ??? ?this.value='QQ號(hào)碼或E-Mail';
?? ??? ?}
}

//下拉表顯現(xiàn)
function showList(e){
?? ??? ?e=e||window.event;
?? ??? ?//用于防止事件冒泡，因?yàn)樯厦嬗悬c(diǎn)擊事件
?? ??? ?if(e.stopropagation){
?? ??? ??? ?e.stopropagation();
?? ??? ?}else{
?? ??? ??? ?e.cancelBubble=true;
?? ??? ?}
?? ??? ?panel.style.display='block';
?? ??? ?state.style.height="300"+"px";
?? ?}

//開(kāi)始拖動(dòng)
function fnDown(event){
?? ?event=event||window.event;
?? ?var area=document.getElementById('box'),
?? ??? ?webq=document.getElementById('webqq');
?? ??? ?disX=event.clientX-area.offsetLeft,
?? ??? ?disY=event.clientY-area.offsetTop;
?? ?//鼠標(biāo)移動(dòng)
?? ?webq.onmousemove=function(event){
?? ??? ?event=event||window.event;
?? ??? ?fnMove(event,disX,disY);
?? ?}
?? ?//釋放鼠標(biāo),無(wú)效，why?
?? ?webq.onmouseout=function(){
?? ? ??? ?webq.onmousemove=null;
?? ? ??? ?webq.onmouseup=null;
? }
?? ?
}

function fnMove(e,posX,posY){
?? ?var area=document.getElementById('box');
?? ?var wid=e.clientX-posX;
?? ?var het=e.clientY-posY;
?? ?
?? ?var Width=document.documentElement.clientWidth||document.body.clientWidth;
?? ?var Height=document.documentElement.clientHeight||document.body.clientHeight;
?? ?var maxWid=Width-area.offsetWidth-10;
?? ?var maxHeight=Height-area.offsetHeight;
?? ?if (wid<=0) {
?? ??? ?wid=0;
?? ?}else if (wid>maxWid) {
?? ??? ?wid=maxWid;
?? ?}
?? ?if (het<0) {
?? ??? ?het=10;
?? ?}else if (het>maxHeight) {
?? ??? ?het=maxHeight-16;
?? ?}
?? ?//一定要有單位“px”，否則下列賦值無(wú)效
?? ?area.style.top=het+'px';
?? ?area.style.left=wid+'px';

}