鼠标锁定（消失），进入无限滚动状态

来自于张鑫旭空间。

一个例子，让图片在点击后 ，进入鼠标锁定（消失）状态，鼠标动X y值还是有的，图片随着x y值变化，旋转。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                line-height: 400px;
                text-align: center;
                position: relative;
                perspective: 2000px;
            }
            
            .box img {
                vertical-align: middle;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <img id="image" src="../images/1.jpg">
            <img src="../images/2.jpg">
        </div>
    </body>

</html>
<script>
    var eleImage = document.getElementById('image');
    if(eleImage) {
        //         起始值
        var moveX = 0,
            moveY = 0;
        //         图片无限变换的方法
        var rotate3D = function(event) {
            moveX = moveX + event.movementX;
            moveY = moveY + event.movementY;

            eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg) rotateZ(' + moveY + 'deg)';
        };

        //         触发鼠标锁定
        eleImage.addEventListener('click', function() {
            //            可以让页面进入鼠标锁定状态（鼠标直接消失），鼠标无限滚动，坐标无限变化
            eleImage.requestPointerLock();
        });

        //         再次点击页面，取消鼠标锁定处理
        document.addEventListener('click', function() {
            //            document.pointerLockElement用来获取当前页面 无限滚动的元素时那个
            if(document.pointerLockElement == eleImage) {
                //                让页面从鼠标锁定状态退出，通常使用语法为
                document.exitPointerLock();
            }
        });

        //         检测鼠标锁定状态变化
        //        当页面鼠标锁定状态改变的时候触发。
        document.addEventListener('pointerlockchange', function() {
            if(document.pointerLockElement == eleImage) {
                document.addEventListener("mousemove", rotate3D, false);
            } else {
                document.removeEventListener("mousemove", rotate3D, false);
            }
        }, false);
    }
</script>

eleImage.requestPointerLock();  某个元素触发鼠标锁定。

document.exitPointerLock(); 当前页面退出鼠标锁定。

document.pointerLockElement。获取开启鼠标锁定的元素。

document.addEventListener('pointerlockchange', function() {}）；页面绑定 鼠标锁定时，鼠标动了，触发某个函数。

posted @ 2017-10-18 10:48  盖大楼  阅读(810)  评论(0)  编辑  收藏  举报