蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 42|回复: 0

基于JavaScript实现全屏透明遮罩div层锁屏效果

[复制链接]

1923

主题

1

好友

1591

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 7 天前 |显示全部楼层
    基于JavaScript实现全屏透明遮罩div层锁屏效果
    废话不多说了,直接给大家写js代码了,代码如下所示:


    lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"gt;
    lt;html xmlns="w3org/1999/xhtml"gt;
    lt;headgt;
    lt;titlegt;js全屏透明遮罩锁屏效果lt;/titlegt;
    lt;meta http-equiv="content-type" content="text/html;charset=gb2312"gt;
    lt;!--把下面代码加到lt;headgt;与lt;/headgt;之间-
    lt;style type="text/css"gt;
    pageOverlay{visibility:hidden;position:fixed;top:0;left:0;z-index:1987;width:100%;height:100%;background:000;filter:alpha(opacity=70);opacity:07;}
    /*IE6 fixed*/
    * html{background:url(*) fixed;}
    * html body{margin:0;height:100%;}
    * html pageOverlay{position:absolute;left:expression(documentElementscrollLeft+documentElementclientWidth-thisoffsetWidth);top:expression(documentElementscrollTop+documentElementclientHeight-thisoffsetHeight);}
    lt;/stylegt;
    lt;script language="javascript"gt;
    (function(){
    // 获取对象
    var $ = function (id){
    return documentgetElementById(id);
    };
    // 遍历
    var each = function(a, b) {
    for (var i = 0, len = alength; i lt; len; i++) b(a[i], i);
    };
    // 事件绑定
    var bind = function (obj, type, fn) {
    if (objattachEvent) {
    obj['e' + type + fn] = fn;
    obj[type + fn] = function(){obj['e' + type + fn](windowevent);}
    objattachEvent('on' + type, obj[type + fn]);
    } else {
    objaddEventListener(type, fn, false);
    };
    };
    // 移除事件
    var unbind = function (obj, type, fn) {
    if (objdetachEvent) {
    try {
    objdetachEvent('on' + type, obj[type + fn]);
    obj[type + fn] = null;
    } catch(_) {};
    } else {
    objremoveEventListener(type, fn, false);
    };
    };
    // 阻止浏览器默认行为
    var stopDefault = function(e){
    epreventDefault 63; epreventDefault() : ereturnValue = false;
    };
    // 获取页面滚动条位置
    var getPage = function(){
    var dd = documentdocumentElement,
    db = documentbody;
    return {
    left: Mathmax(ddscrollLeft, dbscrollLeft),
    top: Mathmax(ddscrollTop, dbscrollTop)
    };
    };
    // 锁屏
    var lock = {
    show: function(){
    $('pageOverlay')stylevisibility = 'visible';
    var p = getPage(),
    left = pleft,
    top = ptop;
    // 页面鼠标操作限制
    thismouse = function(evt){
    var e = evt || windowevent;
    stopDefault(e);
    scroll(left, top);
    };
    each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
    bind(document, o, lockmouse);
    });
    // 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Down
    thiskey = function(evt){
    var e = evt || windowevent,
    key = ekeyCode;
    if((key == 116) || (ectrlKey  key == 82) || (ectrlKey  key == 65) || (key == 9) || (key == 38) || (key == 40)) {
    try{
    ekeyCode = 0;
    }catch(_){};
    stopDefault(e);
    };
    };
    bind(document, 'keydown', lockkey);
    },
    close: function(){
    $('pageOverlay')stylevisibility = 'hidden';
    each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
    unbind(document, o, lockmouse);
    });
    unbind(document, 'keydown', lockkey);
    }
    };
    bind(window, 'load', function(){
    $('btn_lock')onclick = function(){
    lockshow();
    };
    $('pageOverlay')onclick = function(){
    lockclose();
    };
    });
    })();
    lt;/scriptgt;
    lt;/headgt;
    lt;bodygt;
    lt;!--把下面代码加到lt;bodygt;与lt;/bodygt;之间-
    lt;button id="btn_lock" style="position:absolute;left:50%;top:40%;"gt;开启锁屏lt;/buttongt;
    lt;ol id="test"gt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;ligt;jb51netlt;/ligt;
    lt;/olgt;
    lt;div id="pageOverlay"gt;lt;/divgt;
    lt;/bodygt;
    lt;/htmlgt;

    下面一段代码是用js写的登录遮罩效果


    lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" "w3org/TR/html4/loosedtd"gt;
    lt;htmlgt;
    lt;headgt;
    lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"gt;
    lt;titlegt;遮罩lt;/titlegt;
    lt;stylegt;
    blanks{
    display:none;
    width:100%;
    //height:100%;
    height:100px;
    position:absolute;
    top:0;
    background-color:ccc;
    z-index:1000;
    -moz-opacity: 07;
    opacity:70;
    filter: alpha(opacity=70);
    }
    login{
    padding:18px;
    display:none;
    background-color:pink;
    width:300px;
    height:100px;
    position:absolute;
    left:400px;
    top:20%;
    z-index:1001;

    }
    lt;/stylegt;
    lt;/headgt;
    lt;body onload="setHeight()"gt;
    lt;div id="content"gt;
    lt;input type="button" value="登陆" onclick="showLogin()"gt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;pgt;《人生》前15年左右都是些教学关卡,弱弱的,你还没法点“跳过”。
    作为一个初来乍到的新手,你有大把的时间和用不完的精力,但几乎毫无经验。你会发现游戏的大多数元素,
    像什么牛逼的工作啦,财富啦,伴侣啦都还没有解锁,一直到你真正拥有了它们。
    这段时间,你的技能升级得非常快。在之后的游戏中,你再也不可能像这个阶段一样时间充裕而且精力充沛。
    如果想要玩出水平,最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
    lt;/pgt;
    lt;/divgt;
    lt;div id="blanks"gt;lt;/divgt;
    lt;div id="login"gt;
    lt;form method="post"gt;
    用户名:lt;input type="text" name="username" gt;lt;br/gt;
    密码:lt;input type="password" name="password"gt;lt;br/gt;
    lt;input type="submit" value="提交"gt;
    lt;/formgt;
    lt;div id="btnclose" style="position:absolute;left:93%;top:0%;z-index:5;"gt;
    lt;img src="closepng" onclick="hidediv();"/gt;
    lt;/divgt;
    lt;/divgt;
    lt;/bodygt;
    lt;/htmlgt;
    lt;script type="text/javascript"gt;
    function setHeight()
    {
    var h=documentdocumentElementscrollHeight;
    documentgetElementById("blanks")styleheight=h+"px";
    }
    function hidediv()
    {
    documentgetElementById("login")styledisplay="none";
    documentgetElementById("blanks")styledisplay="none";
    }
    function showLogin()
    {
    documentgetElementById("login")styledisplay="block";
    documentgetElementById("blanks")styledisplay="block";
    }
    lt;/scriptgt;

    以上所述是基于JavaScript实现全屏透明遮罩div层锁屏效果的相关内容,希望对大家有所帮助。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-19 07:43

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部