Javascript彈出層-初探

legendaryedu 發布于2019-08-20 10:25 / 2794人閱讀

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。

GPU云服務器云服務器彈出層 fancybox彈出層 frameset彈出層 html彈出層

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80141.html

js 遮罩效果

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

li21 2019-08-29 10:59 評論0 收藏0
js 遮罩效果

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

caige 2019-08-19 18:45 評論0 收藏0
js 遮罩效果

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

yexiaobai 2019-08-01 15:28 評論0 收藏0
js 遮罩效果

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

EscapedDog 2019-07-01 14:18 評論0 收藏0