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。