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
摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...
阅读 4361·2021-11-22 09:34
阅读 2689·2021-11-12 10:36
阅读 741·2021-08-18 10:23
阅读 2635·2019-08-30 15:55
阅读 3110·2019-08-30 15:53
阅读 2080·2019-08-30 15:44
阅读 1359·2019-08-29 15:37
阅读 1400·2019-08-29 13:04