您当前位置:首页 > 文章中心 > SCSCMS

html5锁定元素

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2014-12-28   阅读次数: 7   查看权限: 游客查看

html5锁定元素并隐藏鼠标

html:

<button onclick="lockPointer();">锁住它!</button>
<div id="pointer-lock-element"></div>

javascript:

// 我们将要使之全屏并指针锁定的元素。
    var elem,id = document.getElementById("move");
    function lockPointer() {
        elem = document.getElementById("pointer-lock-element");
        if(0 === get_type){
            alert("不支持全屏!");
        }else{
            elem[get_str(get_type,"requestFullscreen")]();
        }
    }
    var get_str = function(tp,str){
        //firefox 旧版本screen 改成 Screen
        var s = "" == tp ? str : str.charAt(0).toUpperCase() + str.substring(1);
        return tp == "ff" ? "moz" + s.replace("screen","Screen") : tp + s;
    },get_type = function(){
        var s_type = 0,a_arr = ["o","ms","ff","moz","webkit",""],n_length = a_arr.length;
        for(;n_length --;){
            if(typeof document.documentElement[get_str(a_arr[n_length],"requestFullscreen")] != "undefined"){
                return a_arr[n_length];
            }
        }
        return s_type;
    }();

    function fullscreenChange() {
        console.log("fullscreenChange");
        if(document[get_str(get_type,"fullscreenElement")] == elem){
            elem[get_str(get_type,"requestPointerLock")]();
        }
    }
    document.addEventListener(get_str(get_type,"fullscreenchange").toLowerCase(),fullscreenChange, false);

    function pointerLockChange() {
        if(document[get_str(get_type,"pointerLockElement")] == elem){
            console.log("指针锁定成功了。");
        } else {
            console.log("指针锁定已丢失。");
        }
    }
    document.addEventListener(get_str(get_type,"pointerlockchange").toLowerCase(), pointerLockChange, false);

    function pointerLockError() {
        console.log("锁定指针时出错。");
    }
    document.addEventListener(get_str(get_type,"pointerlockerror").toLowerCase(), pointerLockError, false);

 

关键词: requestFullscreen   编辑时间: 2014-12-28 21:38:06

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程