滑动解锁

最新推荐文章于 2021-11-17 17:57:16 发布

O433

最新推荐文章于 2021-11-17 17:57:16 发布

阅读量831

点赞数 2

分类专栏：滑动验证文章标签： js css javascript html5

本文链接：https://blog.csdn.net/P__S__J/article/details/115579550

版权

1.html结构

滑动解锁的样式基本上就是这样，分上下两个部分
上面盒子里面装两个小盒子从而实现滑动到相对应的位置
可见实图效果
在这里插入图片描述

2.网页实现效果

在这里插入图片描述

3.利用js判断两个盒子的位置

如果两个盒子重逢（就是s1和s2离父盒子的左边框的距离相等）就完成验证如果没有对齐的话就回到原地重新刷新，因为每次刷新盒子的位置都不一样，所以要利用随机函数来作为定位的left和top，代码的话可以参考下面的代码块`
可以设置一个误差值

.box {
   
            width: 800px;
            height: 600px;
            border: 1px solid #f00;
            margin: 0 auto;
            position: relative;
        }

        .bg1 {
   
            height: 500px;
            background-color: #ccc;
            position: relative;
            background-image: url(2028275.jpg);
            background-size: 800px 500px;
        }

        .hdInp {
   
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .slid