資訊專欄INFORMATION COLUMN
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的寬度高度 給到當前屏幕可視區(qū)域的 寬高 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 屬性規(guī)定是否可由用戶調整元素的尺寸。
注釋：如果希望此屬性生效，需要設置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/80141.html
摘要： -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery彈出窗口 By Await [2009-11-22] //-...
閱讀 4388·2021-11-22 09:34
閱讀 2703·2021-11-12 10:36
閱讀 753·2021-08-18 10:23
閱讀 2649·2019-08-30 15:55
閱讀 3132·2019-08-30 15:53
閱讀 2093·2019-08-30 15:44
閱讀 1370·2019-08-29 15:37
閱讀 1419·2019-08-29 13:04
