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

最新推荐文章于 2024-06-13 19:48:36 发布

表演者7号

最新推荐文章于 2024-06-13 19:48:36 发布

阅读量2.7k

点赞数

分类专栏： js基础文章标签： js javascript

本文链接：https://blog.csdn.net/biaoyan01/article/details/109604924

版权

js基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

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>

表演者7号

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS实现滑动解锁及滑动验证码的原理技巧

JS实现滑动解锁及验证的原理技巧这里的滑动解锁和许多网页滑动验证码都是采用类似的方法，当然现在验证码的种类也是非常多的，下面就简单回顾一下思路和知识点1.首先如欲与之，得先取之，拿Dom结构中的元素oBox，oShadow，oContent，oTip，oBlock，还是用得老方法document.querySelector2.第一步还是先写一个随机的图片，这个就是三个考虑点。第一这个白块的位置是随机出现的，所以他的left和top都是需要用随机数产生，出现的范围就要在oContent的oContent
复制链接

扫一扫