新人第一次发帖,可喜欢可评论可转载
先来说一说获取页面高度宽度的问题
var sheight = document.documenElement.scrollHeight; //获取页面的高度
var swidth = document.documentElelment.scrollWidth; //获取页面的宽度
var cheight = document.documentElement.clientHeight; //获取页面可视区域的高度
var cwidth= document.documentElement.clientWidth; //获取页面可视区域的高度
页面高度指的是整个网页高度,就是在顶部到底部的长度
页面可是区域的高度指的是我们能看到的长度,如果你不改变浏览器的窗口大小和分辨率的大小,这个值一般是不会改变的。
页面的宽度就没什么好说的了,因为通常情况下 swidth = cwidth 。很少有网页能够左右拉动的。
然后在来说一说弹出层,这个看起来高大上实际上非常简单非常基础的东西,我学习的时候真的是泪流满面,曾经觉得这怎么这么难,看了原理之后这的是欲哭无泪。好吧,我是小白。
先来看看如果要做出弹出层需要知道的东西:
CSS:
position:fixed;
z-index:---;
opacity:0.5;//遮罩层层透明度
filter:alpha(opacity=50);//兼容IE
position:absolute;//绝对定位
Js:
var div = document.create('div');//创建节点
document.body.appendChild(div);//插入节点
说一说弹出层的原理,点击一个按钮时触发一个事件,这个事件新建了两个DOM节点,一个是遮罩层,一个是弹出框。通过设置遮罩层的透明度来实现背景变黑,将遮罩层的 z-index设置为100(比页面中其他元素的z-index)大就可以,弹出框的z-index设置为101(比遮罩层大)。通过点击遮罩层或者关闭按钮删除刚刚创建的节点。
最后,按照习俗该上代码了...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
</head>
<style>
#close{ //关闭按钮
background:url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
text-indent:-999em;
}
#login{ //弹出框
position:fixed;
z-index:1001;
}
.loginCon{
position:relative;
width:670px;
height:380px;
background:url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
}
#Misk{//弹出层
position: absolute;
top:0px;
left:0px;
background-color: #000;
z-index: 1000;
opacity:0.5;
filter:alpha(opacity=50);//兼容IE
}
</style>
<body>
<input id='Btn' type="button" value='打开弹出层' />
<script>
var btn = document.getElementById('Btn');
btn.onclick=function () {
//获取页面的高度和宽度
var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;
//获取页面的可视区域高度和宽度
var wHeight=document.documentElement.clientHeight;
var wWidth=document.documentElement.clientWidth;
var oLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
//插入创建的登陆框
document.body.appendChild(oLogin);
//获取登陆框的宽和高
var dHeight = 400; // 获取登陆框的高度
var dWidth = 800; // 获取登陆框的宽度
//设置登陆框的left和top
oLogin.style.left=wWidth/2-dWidth/2+"px";
oLogin.style.top=wHeight/2-dHeight/2+'px'; //设置登陆框top值
var oMisk = document.createElement('div');
oMisk.id='Misk';
oMisk.style.height=wHeight+'px';
oMisk.style.width=wWidth+'px';
document.body.appendChild(oMisk);
var oClose=document.getElementById("close");
//点击登陆框以外的区域也可以关闭登陆框
oMisk.onclick=oClose.onclick=function()
{
document.body.removeChild(oLogin);
document.body.removeChild(oMisk);
}
}
</script>
</body>
</html>
课程来自慕课网,后续会有更多类似特效,基本每天一个。
网友评论