遮罩层特效，登录界面的应用

来源：互联网发布：腾讯来电软件怎么回事编辑：程序博客网时间：2024/05/01 10:20

今天上午的自己写了下遮罩层，和登陆界面的关闭，总之都是很简单的JS代码，我因为思路问题，所以敲了好长时间，最后再群友的帮助下完成了今天的任务，下午可能还会更新一章，具体什么，还没想好
先写一下写遮罩层的思路吧
首先遮罩层嘛，经过群友的意见，有2种写法，一种是CSS设置宽高，一种是JS设置宽高，总的来说，css比较简单
这两个版本代码差距很少，几乎没大有，不过还是列出来看看

//最核心的代码其实就是遮罩层的代码，#gray{    z-index: 999;    display: none;    background: #ccc;    width: 100%;    height:100%;    position: fixed;    /*position: absolute;*/    top: 0px;    left: 0px;}//一开始我用的是absolute，所以导致我做不出效果，如果是fixed的话，无论你滚动条如何滚都不会有事，而absolute就会出现问题//这是之后的JS代码，window.onload=function(){    var login=document.getElementById("login");    var close=document.getElementById("login_ctn_colse");    var lcontain=document.getElementById("login_ctn");    var gray=document.getElementById("gray")    login.onclick=function(){        lcontain.style.display="block";        gray.style.display="block"    }    close.onclick=function(){        lcontain.style.display="none";        gray.style.display="none";    }

下一种是以JS为主要的代码

#gray{    z-index: 999;    display: none;    background: #ccc;    position: fixed;    top: 0px;    left: 0px;}//JS代码多了获取宽高的部分window.onload=function(){    var login=document.getElementById("login");    var close=document.getElementById("login_ctn_colse");    var lcontain=document.getElementById("login_ctn");    var gray=document.getElementById("gray")    var sWidth=document.body.scrollWidth;    var sHeight=document.body.scrollHeight;    login.onclick=function(){        lcontain.style.display="block";        gray.style.height=sHeight+"px";        gray.style.width=sWidth+"px";        gray.style.display="block"    }    close.onclick=function(){        lcontain.style.display="none";        gray.style.display="none";    }

总体来说还是第一种方法比较好用！！！但是第二种可以封装起来，也到是不错的选择吧！！

0 0