html5锁定元素

【SCSCMS】

下载

新闻

文章

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);