//HTML渲染完后再加载
window.onload = function () {
  var oPanel = document.getElementById('loginPanel'); //登录界面
  var oTitle = document.getElementsByClassName('login_logo_webqq')[0]; //标题栏
  var oStatus = document.getElementById('loginState'); //状态栏
  var oClock = document.getElementById('ui_boxyClose'); //关闭按钮
  //按住标题栏事件
  oTitle.onmousedown = function () {
    var disX = event.clientX - oPanel.offsetLeft; //鼠标点击处和界面左边界的距离
    var disY = event.clientY - oPanel.offsetTop; //鼠标点击处和界面上边界的距离
    //鼠标移动事件：触发登陆界面跟随
    document.onmousemove = function (event/*传入事件*/) {
      event = event || window.event; //取出事件
      var left = event.clientX - disX; //界面左边界水平坐标
      var top = event.clientY - disY; //界面上边界垂直坐标
      var maxLeft = document.documentElement.clientWidth - oPanel.offsetWidth; //界面左边界水平坐标最大限制
      var maxTop = document.documentElement.clientHeight - oPanel.offsetHeight; //界面上边界垂直坐标最大限制
      //如果水平坐标超过最大限制，则界面不再跟随鼠标移动
      if (left > maxLeft - 10) {
        left = maxLeft - 10; //为关闭按钮预留10px空间
      } else if (left < 0) {
        left = 0;
      }
      //同理
      if (top > maxTop) {
        top = maxTop;
      } else if (top < 10) {
        top = 10; //为关闭按钮预留10px空间
      }
      oPanel.style.left = left + 'px'; //client和offset为整型数，不带单位
      oPanel.style.top = top + 'px';
      //松开鼠标键事件：界面不再跟随
      document.onmouseup = function () {
        document.onmousemove = null; //移动事件不再触发任何活动
      }
    }
  }
  //点击状态栏事件：弹出状态选择菜单（下拉菜单）
  oStatus.onclick = function () {
    event.stopPropagation(); //阻止冒泡事件，防止点击了父节点（HTML文档）导致菜单关闭
    var sPanel = document.getElementById('loginStatePanel'); //下拉菜单
    var pLists = document.getElementsByClassName('statePanel_li'); //菜单列表
    sPanel.style.display = 'block'; //显示下HTML拉菜单
    //遍历菜单列表，添加动态效果
    for (var i = 0; i < pLists.length; i++) {
      //鼠标经过事件：触发灰色背景
      pLists[i].onmouseover = function () {
        this.style.backgroundColor = '#999';
      }
      //鼠标移开事件：背景颜色恢复
      pLists[i].onmouseout = function () {
        this.style.backgroundColor = '#fff';
      }
      //鼠标点击事件：更改状态栏内容并关闭下拉菜单
      pLists[i].onclick = function (event) {
        event = event || window.event;
        event.stopPropagation(); //阻止冒泡事件，防止点击了父节点（状态栏）导致下拉菜单关闭失败
        var sShow = document.getElementById('loginStateShow'); //状态栏图标
        var sTxt = document.getElementById('login2qq_state_txt'); //状态栏文本
        sShow.className = 'login-state-show ' + this.id; //修改状态栏图标为选中项的状态图标
        sTxt.innerHTML = this.getElementsByTagName('div')[1].innerHTML; //修改状态栏文本为选中项的状态文本
        sPanel.style.display = 'none'; //关闭下拉菜单
      }
    }
    /*点击HTML文档事件（除状态栏外的其他区域）：触发下拉菜单关闭
      若点击了状态栏，则不会触发此操作（冒泡被阻止）*/
    document.onclick = function () {
      sPanel.style.display = 'none';
    }
  }
  //点击关闭按钮事件：触发登录界面隐藏
  oClock.onclick = function () {
    oPanel.style.display = 'none';
  }
}

通过class来获取元素

事件类型：

鼠标事件

键盘事件

document.getElementByClassName()

IE10以前的浏览器不支持

不同的事件类型

跟着鼠标光标移动的框，都有一个绝对定位：position：absolute；

onmousedown:在用户按下任何鼠标按钮时触发

光标位置 clientX clientY

onmousemove 当鼠标指针在元素内部移动时重复地触发

鼠标事件详情

1、任何能够跟着鼠标移动的东西 都要有一个前提：绝对定位
2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
3、js ie10以下版本不支持document.getElementsByClassName
4、js封装getClass方法，获取class
5、实现随鼠标拖动，需要让窗口的坐标随着鼠标移动，鼠标的坐标保存在时间的clientX和clientY两个属性中。
6、onmousedown鼠标按下 窗口和鼠标的位置同步；
element.style.left/top=clientX/Y+'px';
onmousemove当鼠标指针在元素内部移动时重复地触发

2.在指定区域（整个QQ面板）按下——页面随光标移动，即页面的坐标与光标坐标一致——释放鼠标是停止移动

3.clientX与clentY能够获取鼠标的光标位置；onmousedown鼠标按下事件；移动要用到onmousemove事件，当鼠标指针在元素内部移动时重复的触发；clientX与clentY是event这个对象的属性，非ie用event,ie用window.event

在IE10之前的游览器不支持document.getElementByClassName()。因此为了解决游览器不兼容的问题，首先我们需要封装一个获取类名的方法（这个面板的样式大部分是用class写的）

// 封装一个取类名方法
function getClasses(clsName,parent){
    var oParent = parent ? document.getElementById(parent) : document,
        eles = [],
        elements = oParent.getElementsByTagName("*");

    for(var i=0,j=elements.length;i<j;i++){
        if(elements[i].className === clsName){
            eles.push(elements[i]);      
        }
    }

    return eles;
}

2.在指定区域（整个QQ面板）按下——页面随光标移动，即页面的坐标与光标坐标一致——释放鼠标是停止移动

3.clientX与clentY能够获取鼠标的光标位置；onmousedown鼠标按下事件；移动要用到onmousemove事件，当鼠标指针在元素内部移动时重复的触发；clientX与clentY是event这个对象的属性，非ie用event,ie用window.event

QQ面板拖拽效果的制作

1. 在IE10之前的游览器不支持document.getElementByClassName()。因此为了解决游览器不兼容的问题，首先我们需要封装一个获取类名的方法（这个面板的样式大部分是用class写的）

2.