zoukankan      html  css  js  c++  java
  • QQ面板拖拽(慕课网DOM事件探秘)(下)

    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;
    }
  • 相关阅读:
    JavaScript 正则表达式
    git常用命令
    用纯css使内容永远居在页面底部
    Oracle中随机抽取N条记录
    表数据回复到某个时候
    oracle同名存储过程被覆盖后如何恢复(转)
    mybatis+spring+mysql
    定位
    关于js的闭包和复制对象
    idea展示runDashboard的窗口
  • 原文地址:https://www.cnblogs.com/sunxirui00/p/7515648.html
Copyright © 2011-2022 走看看