资讯专栏INFORMATION COLUMN

Javascript弹出层-初探

legendaryedu / 2793人阅读

IFE2016 task 37

1 生成遮罩层
    function addMask(){
        var body = document.getElementsByTagName("body")[0];
        body.style.overflow = "hidden";
    
        var scrollH = document.documentElement.clientHeight;
        var oMask = document.createElement("div");
        oMask.style.cssText = "position:absolute;top:0;left:0;height:"+scrollH+"px;width:100%;background-color:#000;opacity:0.6;z-index:1000;";
        document.body.appendChild(oMask);
    
        var float = document.createElement("div");
        float.id = "float";
        float.style.cssText = "position:absolute;top:50%;left:50%;height:200px;width:400px;transform:translate(-50%,-50%);background-color:#ccc;z-index:1001;";
        document.body.appendChild(float);
    
        oMask.onclick = function(){
            document.body.removeChild(oMask);
            document.body.removeChild(float);
            body.style.overflow = "auto";
        }
        drag();
    }
新建 遮罩层  和 弹出层
oMask的宽度高度 给到当前屏幕可视区域的 宽高
float居中定位
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
body.style.overflow = "hidden";
body.style.overflow = "auto";
这两行代码
在遮罩层弹出时 禁止界面滑动

2.弹出层的移动
     function drag(){
            var float = document.getElementById("float");
        
            float.addEventListener("mousedown",function(event){
                startX = event.pageX - float.offsetLeft;
                startY= event.pageY - float.offsetTop;
                draging = true;
            },false);
        
            document.addEventListener("mousemove",function(event){
                var nowX= event.pageX;
                var nowY= event.pageY;
                var moveX = 0;
                var moveY = 0;
                if (draging === true) {
                    moveX = nowX- startX ;
                    moveY = nowY - startY;
                    //控制DIV不超出屏幕边界
                    var scrollW = document.documentElement.clientWidth;
                    var scrollH = document.documentElement.clientHeight;
                    var divW = float.offsetWidth;
                    var divH = float.offsetHeight;
                    var maxX = scrollW - divW/2;
                    var maxY = scrollH - divH/2;
        
                    moveX = Math.min( maxX , Math.max(divW/2,moveX) );
                    moveY = Math.min( maxY , Math.max(divH/2,moveY) );
        
                    float.style.left = moveX + "px";
                    float.style.top = moveY + "px";
                }
            },false);

通过startX startY nowX nowY
确定鼠标移动的距离 moveX moveY
mousemove属性设置在document 避免鼠标速度过快离开 弹出层
可以添加CSS 属性 corsor 来改变鼠标样式

点此查看详情

3.DIV大小的改变
#float{
    overflow: auto;
    resize: both;
}

定义和用法

resize 属性规定是否可由用户调整元素的尺寸。

注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80141.html

相关文章

  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    li21 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    caige 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    yexiaobai 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    EscapedDog 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<