JS实现滑动解锁及验证的原理技巧

这里的滑动解锁和许多网页滑动验证码都是采用类似的方法，当然现在验证码的种类也是非常多的，下面就简单回顾一下思路和知识点

拖动验证码java实现 js 滑动验证码_javascript

1.首先如欲与之，得先取之，拿Dom结构中的元素oBox，oShadow，oContent，oTip，oBlock，还是用得老方法document.querySelector
2.第一步还是先写一个随机的图片，这个就是三个考虑点。第一这个白块的位置是随机出现的，所以他的left和top都是需要用随机数产生，出现的范围就要在oContent的oContent.clientW/H - oShadow.offsetW/H之间，

var maxTop = oContent.clientHeight - oShadow.offsetHeight;
 var maxLeft = oContent.clientWidth - oShadow.offsetWidth;


随机的图片验证函数 function setPosition(){
用随机数乘以最大范围那么这个值就在oContent的可视范围

var randomLeft=Math.round(Math.random() * maxLeft)
 var randomTop = Math.round(Math.random() * maxTop);


第二个就是白块产生的高度和需要移动的oTip的高度是一致的，

oShadow.style.left = ${randomLeft}px;
oShadow.style.top = ${randomTop}px;
oTip.style.top = ${randomTop}px;


也是为了保证背景图片一致给到的背景定位是负的

oTip.style.backgroundPosition = ${-randomLeft}px ${-randomTop}px;
oBlock.style.backgroundPosition = ${-randomLeft}px ${-randomTop}px;


第三个就是oTip的left要和移动的oBlock的位移一致的，这样移动下面oBlock动的时候oTip就可以和他一起移动效果，也是一个按下委托事件

oBlock.onmousedown = function (e) {
 var ev = event || e;
 var startX = ev.x;这是拿初始按下的位置


和鼠标滑动委托事件，这个按下和滑动是组合的

window.onmousemove = function (e) {
 var ev = event || e;
 var left = ev.x - startX;拿移动产生位移


这个滑块也要规定范围不然移出范围所以当他位移小于0是就不让左了
当范围超过最大maxLeft就不让右了

(if (left <= 0) left = 0;
 if (left >= maxLeft) left = maxLeft;


在这范围内oBlock动的时候oTip就可以和他一起移动
oTip.style.left = ${left}px oBlock.style.left = ${left}px 接下来就解决鼠标松下时的判断问题了，用到了鼠标松下事件

window.onmouseup = function () {
 window.onmousemove = null;清除松之后滑块不跟随鼠标


这边也是为了防止手抖放不准的用户，我们给到一个误差值范围，给了一个4像素的误差范围

if (Math.abs(oTip.offsetLeft - oShadow.offsetLeft) <= 2) {
 location.href = ‘http://www.baidu.com’;}


否则的话回到起点位置else {

oTip.style.left = 0;
 oBlock.style.left = 0;
 setPosition();再重新产生一个随机的位置
 }}}


最解决以下移出范围的拖拽问题

window.ondragstart = function () {
 return false }


当然这边页面一开始加载就应该运行这个随机图片
以下就是body结构可以自己试试

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 650px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            position: relative;
        }

        #content {
            width: 650px;
            height: 350px;
            position: relative;
            background-image: url("../source/check.jpeg");
            background-size: 650px 350px;
        }

        #shadow {
            height: 40px;
            width: 40px;
            position: absolute;
            background-color: aliceblue;
            top: 0;
            left: 0;

            /* top: 210px; */
            /* left: 300px; */
        }

        #tip {
            height: 40px;
            width: 40px;
            position: absolute;
            left: 0;
            top: 0;
            background-image: url("../source/check.jpeg");
            background-size: 650px 350px;
            z-index: 10;

            /* top: 210px; */
            /* background-position: -300px -210px; */
        }

        #block {
            height: 40px;
            width: 40px;
            position: absolute;
            left: 0;
            top: 355px;
            background-image: url("../source/check.jpeg");
            background-size: 650px 350px;

            /* left :?;   ===    -300px */
            /* background-position: -300px -210px; */
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="content">
            <div id="shadow"></div>
            <div id="tip"></div>
        </div>
        <div id="block"></div>
    </div>
</body>

以下时js的代码，

<script>

    var oBox= document.querySelector('#box');
    var oShadow = document.querySelector('#shadow');
    var oContent = document.querySelector('#content');
    var oTip = document.querySelector('#tip');
    var oBlock = document.querySelector('#block');

    var maxTop = oContent.clientHeight - oShadow.offsetHeight;
    var maxLeft = oContent.clientWidth - oShadow.offsetWidth;


    setPosition();

    function setPosition() {
        var randomTop = Math.round(Math.random() * maxTop);
        var randomLeft = Math.round(Math.random() * maxLeft);

        oShadow.style.left = `${randomLeft}px`;
        oShadow.style.top = `${randomTop}px`;
        oTip.style.top = `${randomTop}px`;

        oTip.style.backgroundPosition = `${-randomLeft}px ${-randomTop}px`;
        oBlock.style.backgroundPosition = `${-randomLeft}px ${-randomTop}px`;
    }



    oBlock.onmousedown = function (e) {
        var ev = event || e;
        var startX = ev.x;

        window.onmousemove = function (e) {
            var ev = event || e;
            var left = ev.x - startX;

            if (left <= 0) left = 0;
            if (left >= maxLeft) left = maxLeft;

            oTip.style.left = `${left}px`
            oBlock.style.left = `${left}px`

        }

        window.onmouseup = function () {
            window.onmousemove = null;
            if (Math.abs(oTip.offsetLeft - oShadow.offsetLeft) <= 2) {
                location.href = 'http://www.baidu.com';
            } else {
                oTip.style.left = 0;
                oBlock.style.left = 0;
                setPosition();
            }
        }
    }

    window.ondragstart = function () {
        return false
    }

    </script>