/**
* Created by Administrator on 2015/11/27.
*/
//封裝className 兼容IE
function className(clsName,parent){//每一個參數為class名，第二個參數為該class名的父元素的ID
? ?var oParent = parent?document.getElementById(parent):document;
? ?var item=[];
? ?var cName=oParent.getElementsByTagName('*');

? ?for(var i=0; i<cName.length; i++){
? ? ? ?if(cName[i].className==clsName){
? ? ? ? ? ?item.push(cName[i]);
? ? ? ?}
? ?}
? ?return item;
}
//封裝一個div始終居中
function boCenter(id){
? ?var oWidth = id.offsetWidth;
? ?var oHeight = id.offsetHeight;
? ?var scrWidth = document.documentElement.offsetWidth || document.body.offsetWidth ;
? ?var scrHiehght = document.documentElement.clientHeight || window.innerHeight;
? ?id.style.top = scrHiehght/2 - oHeight/2 + 'px';
? ?id.style.left = scrWidth/2 - oWidth/2 + 'px';
}

window.onload = oready;//加載完后（入口）

function oready(){
? ?var box = document.getElementById('loginPanel');//得到盒子
? ?boCenter(box);//讓盒子始終居中
? ?var region = className('login_logo_webqq','loginPanel')[0];//調用封裝函數得到第一個class的盒子
? ?var close = document.getElementById('ui_boxyClose');//關閉按鈕
? ?var login = document.getElementById('loginState');
? ?var selectBox = document.getElementById('loginStatePanel');
? ?var listClass = className('statePanel_li','loginStatePanel');//得到所有的列表項
? ?var icon = document.getElementById('loginStateShow');//需要改變class的id
? ?var content = document.getElementById('login2qq_state_txt');//得到顯示欄對象
? ?//鼠標按下
? ?region.onmousedown = fnDown;
? ?//鼠標松開
? ?region.onmouseup = function(){

? ? ? ?document.onmouseup =null;//清空鼠標松開事件
? ? ? ?document.onmousemove=null;//清空移動事件應用DOM 0級
? ?}
? ?//關閉窗口
? ?close.onclick = function(){
? ? ? ?box.style.display = 'none';
? ?}
? ?//點擊下拉菜單
? ?login.onclick = function(event){
? ? ? ?event = event || window.event;//以下操作阻止事件冒泡
? ? ? ?if(event.stopPropagation){//DOM下
? ? ? ? ? ?event.stopPropagation();
? ? ? ?}else if(event.cancelBubble){//IE下
? ? ? ? ? ?event.cancelBubble = true;
? ? ? ?}
? ? ? ?selectBox.style.display = 'block';
? ?}
? ?//點擊頁面的任何一個位置
? ?document.onclick = ?function(){
? ? ? ?selectBox.style.display = 'none';//將選項列表隱藏
? ?}
? ?//遍歷所有的下拉列表項
? ?for(var j = 0; j < listClass.length; j++){
? ? ? ?listClass[j].onmouseover = function() {//鼠標獲得焦點
? ? ? ? ? ?this.style.background = '#eee';//改變當前list的背景色
? ? ? ?}
? ? ? ?listClass[j].onmouseout = function(){//鼠標失去焦點
? ? ? ? ? ?this.style.background = '#fff';
? ? ? ?}
? ? ? ?listClass[j].onclick = function(event){//鼠標點擊時
? ? ? ? ? ?event = event || window.event;//以下操作阻止事件冒泡
? ? ? ? ? ?if(event.stopPropagation){//DOM下
? ? ? ? ? ? ? ?event.stopPropagation();
? ? ? ? ? ?}else if(event.cancelBubble){//IE下
? ? ? ? ? ? ? ?event.cancelBubble = true;
? ? ? ? ? ?}
? ? ? ? ? ?var id = this.id;
? ? ? ? ? ?icon.className = '';
? ? ? ? ? ?icon.className = 'login-state-show ' + id;
? ? ? ? ? ?content.innerHTML = className('stateSelect_text',id)[0].innerHTML;//改變顯示欄中的文本
? ? ? ? ? ?selectBox.style.display = 'none';//將選項列表隱藏
? ? ? ?}

? ?}
}

function fnDown(event){//鼠標按下
? ?event = event || window.event; //為了兼容IE
? ?var box = document.getElementById('loginPanel');//得到盒子
? ?var widX = event.clientX - box.offsetLeft;//得到鼠標離盒子左邊緣的距離
? ?var widY = event.clientY - box.offsetTop;//得到鼠標離盒子右邊緣的距離
? ?document.onmousemove=function(event){//鼠標托拽
? ? ? ?event = event || window.event;//兼容IE
? ? ? ?fnmove(event,widX,widY);//調用fnmove函數
? ?}
}
function fnmove(event,widX,widY){//鼠標移動
? ?var box = document.getElementById('loginPanel');//得到盒子
? ?var elementHeight = document.documentElement.clientHeight || window.innerHeight;//網頁的高
? ?var elementWidth = document.documentElement.scrollWidth || document.body.scrollWidth;//網頁的寬
? ?var availheight = elementHeight - box.offsetHeight - 5;//得到最大的移動高
? ?var availwidth = ?elementWidth - box.offsetWidth - 10;//得到最大的移動寬

? ?var l = event.clientX - widX;//得到盒子到邊緣的距離
? ?var t = event.clientY - widY;//得到盒子到頂端的距離
? ?if(l<5){
? ? ? ?l = 5;
? ?}else if(l>availwidth){
? ? ? ?l = availwidth;
? ?}
? ?if(t<10){
? ? ? ?t = 10;
? ?}else if(t>availheight){
? ? ? ?t = availheight;
? ?}
? ?box.style.left=l+'px';//設置移動后的橫坐標
? ?box.style.top=t+'px';//設置移動后的縱坐標
}