来自这里http://www.imooc.com/qadetail/149581?t=198457

于 2017-08-28 17:22:25 发布
阅读量1.8k 收藏
点赞数
分类专栏： web前端
<!DOCTYPE html>
< html >
< head >
    < meta  charset = "UTF-8" >
    < title >DOM事件探秘</ title >
    < style  type = "text/css" >
        * {
            margin: 0;
            padding: 0;
        }
       ul {
           list-style: none;
       }
       #qq-wrap {
           position: absolute;
           margin: 0 auto;
           padding: 20px 10px;
           width: 580px;
           height: 260px;
           border: 1px solid gray;
           border-radius: 15px;
       }
       #qq-top {
           height: 44px;
         width: 200px;
         background: url(../QQ/images/login_window_logo.png) no-repeat -200px 0;
         margin: 5px auto;
         background-color: red;
       }
       #qq-con {
           font-size: 1.2rem;
         width: 230px;
         margin: 0 auto;
       }
       #qq-con>div {
           margin-top: 40px;
       }
       input {
           font-size: 1rem;
       }
       input[type=submit] {
           font-size: 1rem;
         width: 80px;
         margin: 0 20px 0 15px;
       }
       #state {
           padding-top: 2px;
           height: 29px;
           font-size: 0rem;
       }
       #state .s-state {
           display: inline-block;
           height: 15px;
           width: 110px;
           vertical-align: bottom;
       }
       .s-state>span {
           vertical-align: bottom;
           display: inline-block;
           /*width: 35px;*/
           height: 15px;
           line-height: 18px;
           margin: 0 3px;
       }
       #state span:first-child {
           width: 15px;
       }
       .online {
           background: url(../QQ/images/ptlogin.png) 0 0 no-repeat;
       }
       .away {
           background: url(../QQ/images/ptlogin.png) -18px 0 no-repeat;
       }
       .busy {
           background: url(../QQ/images/ptlogin.png) -36px 0 no-repeat;
       }
       .nobody {
           background: url(../QQ/images/ptlogin.png) -72px 0 no-repeat;
       }
       .please {
           background: url(../QQ/images/ptlogin.png) -90px 0 no-repeat;
       }
       #state .state2 {
           width: 10px;
           background: url(../QQ/images/ptlogin.png) no-repeat -0px -18px;
       }
       #state span:last-child {
           /*width: 90px;*/
           font-size: 0.5rem;
       }
       #states {
           width: 110px;
           border: 1px solid #000;
           font-size: 0.8rem;
           margin-left: 115px;
           display: none;
           background-color: #fff;
       }
       #states .st-ico {
           display: inline-block;
           width: 15px;
           height: 15px;
       }
       #states .st-text {
           vertical-align: top;
       }
       #states .st-li {
           text-indent: 20px;
       }
       #states .st-li:hover {
           background-color: gray;
       }
    </ style >
</ head >
< body >
    < div  id = "qq-wrap" >
         < div  id = "qq-top" ></ div >
         < form  id = "qq-con"  name = "qq-con" >
             < div >
                 < label >账号</ label >
                 < input  type = "text"  name = "user"  placeholder = "请输入QQ号或邮箱" >
             </ div >
             < div >
                 < label >密码</ label >
                 < input  type = "password"  name = "password" >
             </ div >
             < div  id = "state" >
                 < input  type = "submit"  name = "submit"  value = "确定" >
                 < div >
                     < span ></ span >
                     < span ></ span >
                     < span >我在线</ span >
                 </ div >
             </ div >
             < ul  id = "states" >
                 < li  id = "online" >< span  class = "st-ico online" ></ span >< span >我在线</ span ></ li >
                 < li  id = "away" >< span  class = "st-ico away" ></ span >< span >离线</ span ></ li >
                 < li  id = "busy" >< span  class = "st-ico busy" ></ span >< span >忙碌</ span ></ li >
                 < li  id = "nobody" >< span  class = "st-ico nobody" ></ span >< span >不在</ span ></ li >
                 < li  id = "please" >< span  class = "st-ico please" ></ span >< span >请勿打扰</ span ></ li >
             </ ul >
         </ form >
    </ div >
    < script  type = "text/javascript" >
var eventUtil = {
    // 添加事件
    addHandler:function(elem,type,handler){
       if (elem.addEventListener) {
          elem.addEventListener(type,handler,false);
       }else if (elem.attachEvent) {
          // IE type前需要加'on'
          elem.attachEvent('on'+type,handler);
       }else{
          elem['on'+type] = handler;
       }
    },
    // 删除事件
    removeHandler:function(elem,type,handler){
       if (elem.removeEventListener) {
          elem.removeEventListener(type,handler,false);
       }else if (elem.detachEvent) {
          // IE type前需要加'on'
          elem.detachEvent('on'+type,handler);
       }else{
          elem['on'+type]=null;
       }
    },
    // 获取事件对象
    getEvent:function(event){
       return event?event:window.event;
    },
    // 获取事件对象的类型
    getType:function(event){
       return event.type;
    },
   // 获取事件对象的目标
   getElement:function(event){
     return event.target||event.srcElement;
   },
   // 阻止事件对象冒泡
   stopPropagation:function(event){
     if (event.stopPropagation) {
       event.stopPropagation();
       // 不要忘了加括号
     } else {
       event.cancelBubble = true;
     }
   },
   // 阻止事件对象的默认行为
   preventDefault:function(event){
     if (event.preventDefault) {
       event.preventDefault();
       // 不要忘了加括号
     } else {
       event.returnValue = false;
       // 这里注意boolean值
     }
   }
    
};
 
// QQ
var sState = document.getElementsByClassName('s-state')[0],
    span_ico = sState.getElementsByTagName('span')[0],
    states = document.getElementById('states'),
    s_text = sState.getElementsByTagName('span')[2],
    li_s = document.getElementsByClassName('st-li');
eventUtil.addHandler(sState,'click',function(event){
    event = eventUtil.getEvent(event);
    eventUtil.stopPropagation(event);
    states.style.display = 'block';
});
for (var i = 0; i < li_s.length; i++) {
    eventUtil.addHandler(li_s[i],'click',function(event){
       event = eventUtil.getEvent(event);
       eventUtil.stopPropagation(event);
       states.style.display = 'none';
       span_ico.className = this.id;
       s_text.innerHTML = this.getElementsByClassName('st-text')[0].innerHTML;
    });
}
// 点击空白区域,关闭下拉面板
document.onclick = function(){
    states.style.display = 'none';
}
// 移动QQ面板
var qq_top = document.getElementById('qq-top'),
    qq_wrap = document.getElementById('qq-wrap');
eventUtil.addHandler(qq_top,'mousedown',function(event){
    mouseD(event);
});
 
function mouseD(event){
    event = eventUtil.getEvent(event);
    eventUtil.stopPropagation(event);
    // 计算光标在面板中的距离
    var disX = event.clientX-qq_wrap.offsetLeft,
       disY = event.clientY-qq_wrap.offsetTop;
    console.log(disX);
    eventUtil.addHandler(document,'mousemove',function(event){
       mouseM(event,disX,disY);
    });
    //这个mouseup事件我不知道要怎么写了
    eventUtil.addHandler(document,'mouseup',function(event){
       event = eventUtil.getEvent(event);
       eventUtil.stopPropagation(event);
       eventUtil.removeHandler(document,'mousemove',function(event){
          mouseM(event);
       });
       
    });
}
 
function mouseM(event,posX,posY){
       var winW=document.documentElement.clientWidth || document.body.clientWidth,
        winH=document.documentElement.clientHeight || document.body.clientHeight,
        maxW=winW-qq_wrap.offsetWidth,
        maxH=winH-qq_wrap.offsetHeight;
       // 注意此函数的参数,需要重新赋值
       var event = eventUtil.getEvent(event);
       eventUtil.stopPropagation(event);
       // 计算移动中面板的位置
       var L = event.clientX-posX,
          T = event.clientY-posY;
       if (L< 0 ) {
          L = 0 ;
       } else if(L>maxW){
          L=maxW;
       }
       if (T< 0 ) {
          T = 0 ;
       } else if(T>maxH){
          T=maxH;
       }
       qq_wrap.style.left = L+'px';
       qq_wrap.style.top = T+'px';
       console.log(event.clientX+'+'+event.clientY+'+'+L+'+'+T);
    }
    </ script >
</ body >
</ html >
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值