首页 > 代码库 > dom03

dom03

鼠标事件:

键盘事件:

 

//通过class获取元素,封装一个通过class获取元素的方法//IE10以下不支持document.getElementByClass()function getByClass(className,parent){//必须的元素(前面),可选的元素    var oParent=parent?document.getElementById(parent):document,//如果有父元素传递过来,不传递父元素对象,而是传父元素上的ID;如果没传父元素就用document        eles=[],        elements=oParent.getElementsByTagName(‘*‘);//获取所有元素    for(var i=0,l=elements.length;i<l;i++){//遍历所有元素,可以同时初始化多个变量        if(elements[i].className==className){//等于传过来的className            eles.push(elements[i]);        }    }    return eles;}window.onload=drag;function drag(){    var oTitle=getByClass(‘login_logo_webqq‘,‘loginPanel‘)[0];//数组中第一个元素;当前元素,父元素    //拖曳的操作    oTitle.onmousedown=fnDown;    }//鼠标事件都是在浏览器窗口中的特定位置上发生的。//这个位置信息保存在事件的clientX和clientY属性中//所有浏览器都支持这两个属性//他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。function fnDown(event){    var oDrag=document.getElementById(‘loginPanel‘);    // document.onmousemove=function(event){//变量event接收事件对象    //     event=event||window.event;//非IE 和IE浏览器对象不一样    //     //document.title=event.clientX+‘,‘+event.clientY;    //     oDrag.style.left=event.clientX+‘px‘;    //     oDrag.style.top=event.clientY+‘px‘;    //光标按下时光标和面板之间的距离    disX=event.clientX-oDrag.offsetLeft,    disY=event.clientY-oDrag.offsetTop;    //移动    document.onmousemove=function(event){        event=event||window.event;        fnMove(event,disX,disY);    }    //释放    document.onmouseup=function(){        document.onmousemove=null;        document.onmouseup=null;    }}function fnMove(e,posX,posY){    var oDrag=document.getElementById(‘loginPanel‘);    var l=e.clientX-posX,        t=e.clientY-posY,        winW=document.documentElement.clientWidth || document.body.clientWidth,        winH=document.documentElement.clientHeight||document.body.clientHeight,        maxW=winW-oDrag.offsetWidth,        maxH=winH-oDrag.offsetHeight;        if(l<0){            l=0;        }        else if(l>maxW){            l=maxW;        }        if(t<0){            t=0;        }else if(t>maxH){            t=maxH;        }    oDrag.style.left=l+‘px‘;    oDrag.style.top=t+‘px‘;    document.title=l;}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style>        .login_logo_webqq{background-color: white; height: 8px; width: auto;}        .loginPanel{position: absolute;width: 80px; height: 40px; background-color: blue; border:1px solid blue;border-radius: 5px;}    </style>    <script src="drag.js"></script></head><body>    <div class=‘div‘>        <div class=‘loginPanel‘  id=‘loginPanel‘>            <div class=‘login_logo_webqq‘></div>        </div>    </div></body></html>

 

dom03