js 模仿手机手势解锁

只做了pc端  没有做手机端touch事件的兼容 有兴趣的朋友可以改改

<div class="main">
    <div class="gesture">
        <ul>
        </ul>
        <div id="pan">
        </div>
    </div>
</div>
<div class="footer">
    <button onclick="set_tu()">
        保存图案</button>
    <button onclick="get_tu()">
        开始画图</button>
</div>
<style>
    body
    {
        margin: 0;
        padding: 0;
    }
    .main
    {
        float: left;
        width: 100%;
    }
    .footer
    {
        float: left;
        margin-left: 50px;
    }
    .gesture
    {
        width: 216px;
        float: left;
        margin: 50px;
        position: relative;
    }
    .gesture #pan
    {
        position: relative;
    }
    .gesture #pan span
    {
        width: 23px;
        height: 2px;
        position: absolute;
        left: 50px;
        background: black;
        top: 24px;
    }
    .gesture #pan span.h
    {
        width: 20px;
    }
    .gesture #pan span.x
    {
        top: 62px;
        transform: rotate(45deg);
        width: 51px;
    }
    .gesture #pan span.s
    {
        width: 22px;
        transform: rotate(90deg);
    }
    .gesture #pan span.xia
    {
        transform: rotate(-45deg);
    }
    ul
    {
        list-style: none;
        width: 100%;
        float: left;
        padding: 0;
        margin: 0;
    }
    ul li
    {
        width: 50px;
        height: 50px;
        border: 1px solid green;
        border-radius: 30px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    body
    {
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none; /* 以下两个属性目前并未支持，写在这里为了减少风险 */
        -o-user-select: none;
        user-select: none;
    }
</style>

　　

<script>
    //曲线
    var pan = document.querySelector("#pan");

    //图案
    var ul = document.querySelector("ul");
    for (var i = 0; i < 9; i++) {
        var li = document.createElement("li");
        li.id = i;
        ul.appendChild(li);
        li.onmousedown = mouse_down;
        //鼠标在图案上移动
        li.onmousemove = mouse_move;
        li.onmouseup = mouse_up;
    }

    //参数
    var tu_arr = []; //图案集合保存记录
    var hua_arr = []; //图案集合画图记录
    var mouse_isdown; //鼠标是否按下
    var mouse_type = false; //画图还是记录 true 画图 false 记录
    var mouse_down_dom; //画的最后一个图标
    //鼠标按下
    function mouse_down() {
        if (!mouse_type) {
            tu_arr = [];
            clear_tu();
        }

        var left = this.offsetLeft
        var top = this.offsetTop
        mouse_isdown = true;
        mouse_down_dom = this;
    }
    //鼠标移动
    function mouse_move(ev) {
        if (mouse_isdown) {
            this.style.background = "green";
            if (!mouse_type && tu_arr.indexOf(this.id) < 0) {
                tu_arr.push(this.id);
            }
            else if (hua_arr.indexOf(this.id) < 0)
                hua_arr.push(this.id);

            var jian_id = Math.abs(this.id - mouse_down_dom.id);
            if (jian_id > 0) {
                var left;
                var top;
                var jian_id_result = this.id - mouse_down_dom.id;
                var span = document.createElement("span");
                switch (jian_id) {
                    case 1:
                        span.className = "h";
                        if (jian_id_result == 1) {
                            left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth;
                            top = mouse_down_dom.offsetTop + mouse_down_dom.offsetHeight / 2;
                        } else {
                            left = this.offsetLeft + this.offsetWidth;
                            top = this.offsetTop + this.offsetHeight / 2;
                        }
                        break;
                    case 3:
                        span.className = "s";
                        if (jian_id_result == 3) {
                            left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth / 2 - 12;
                            top = mouse_down_dom.offsetTop + mouse_down_dom.offsetHeight + 8;
                        } else {
                            left = this.offsetLeft + this.offsetWidth / 2 - 12;
                            top = this.offsetTop + this.offsetHeight + 8;
                        }
                        break;
                    case 4:
                        span.className = "x";
                        if (jian_id_result == 4) {
                            left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth - 14;
                            top = mouse_down_dom.offsetTop + mouse_down_dom.offsetHeight + 8;
                        } else {
                            left = this.offsetLeft + this.offsetWidth - 14;
                            top = this.offsetTop + this.offsetHeight + 8;
                        }
                        break;
                    case 2:
                        span.className = "x xia";
                        if (jian_id_result == 2) {
                            left = this.offsetLeft + this.offsetWidth / 2 + 9;
                            top = this.offsetTop - 12;
                        } else {
                            left = mouse_down_dom.offsetLeft + mouse_down_dom.offsetWidth / 2 + 9;
                            top = mouse_down_dom.offsetTop - 12;

                        }
                        break;
                }
                span.style.left = left;
                span.style.top = top;
                pan.appendChild(span);
            }
            mouse_down_dom = this;
        }

    }
    //鼠标抬起
    ul.onmouseup = mouse_up;
    function mouse_up(e) {
        var e = e || window.event;
        if (e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();
        } else {
            e.cancelBubble = true; //IE阻止冒泡方法  
        }
        //开始比较图案
        if (mouse_type) {
            var result = tu_arr.join(",") == hua_arr.join(",");
            if (!result) {
                alert("解锁失败");
            } else
                alert("解锁成功");
            hua_arr = [];
            clear_tu();
        }
        mouse_isdown = false;
    }

    //保存图案
    function set_tu() {
        hua_arr = [];
        clear_tu();
    }
    //画图
    function get_tu() {
        mouse_type = true;
    }

    //清空当前所画图案
    function clear_tu() {
        pan.innerHTML = "";
        var li_list = ul.querySelectorAll("li");
        for (var i = 0; i < li_list.length; i++) {
            li_list[i].style = "";
        }
    }
</script>

如有疑问联系QQ:2388908676