QQ面板拖拽(慕课网DOM事件探秘)(下)

2017-09-13 20:37:18来源:cnblogs.com作者:喵嘻嘻人点击

分享

2.鼠标事件坐标获取

function fnDown(event) {    var event = event || window.event;    var oDrag = document.getElementById("loginPanel");    //光标按下时光标和面板之间的距离;    var disX = event.clientX - oDrag.offsetLeft;    var 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(event, posX, posY) {    var oDrag = document.getElementById("loginPanel");    var l = event.clientX - posX;    var t = event.clientY - posY;    var winW = document.documentElement.clientWidth;    var winH = document.documentElement.clientHeight;    var maxW = winW - oDrag.offsetWidth - 10;    var maxH = winH - oDrag.offsetHeight;    //当l=0时,窗口不能继续外移    if (l < 0) {        l = 0;    } else if (l > maxW) {        l = maxW;    }    if (t < 10) {        t = 10;    } else if (t > maxH) {        t = maxH;    }    oDrag.style.left = l + "px";    oDrag.style.top = t + "px";}

3.封装各浏览器通用的getElementsByClassName()方法

方法返回的是一个数组,切记

 

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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台