图片拖动验证前置知识

HTML5 新增查询 API

querySelector
querySelectorAll

模拟 jquery 封装两个查询方法：

function $(selector) {
  	return document.querySelector(selector);
}

function $$(selector) {
    return document.querySelectorAll(selector);
}

CSS sprite 精灵图

CSS Sprite，我们一般叫他雪碧图或精灵图，它是一种图像拼合技术。该方法是将小图标和背景图像合并到一张图片上，然后利用 css 的背景定位来显示需要显示的图片部分。

雪碧图的使用有以下几个优点：

减少图片的字节。
减少网页的http请求，从而大大的提高页面的性能。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

语法：background-position:npx npx;

第一个值是调左右的，当你需要将背景图向右调的时候用正值，向左则为负值同理将背景图上下调动的时候上是用负值，下是正值

我们通过设置 background-position 属性，来调整背景图的位置

再例如：

如果想要下面的图形，就可以调整第二个参数，例如：

CSS 过渡效果

在 CSS3 中，新增了过渡效果，可以让我们在样式切换时更加的丝滑，不至于两个样式之间切换很生硬。

transition 语法如下：

transition: property duration timing-function delay

transition属性是个复合属性，包括以下几个子属性：

transition-property ：规定设置过渡效果的 css 属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间

CSS 过渡示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s;
        }
        div:hover{
            height: 300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

2021-07-24 21.40.41

随机数计算公式

这里需要使用到 Math 的 random 方法，如下：

Math.floor(Math.random() * 可能性数 + 第一个可能性值)

图片拖动验证笔记

拖动按钮的距离计算

在这个案例中，主要就是要弄清楚如何计算拖动按钮的距离。

用户之所以可以按住按钮实时的进行滑动，实际上就是在不停的修改按钮的 left 值。那么实时的得到按钮最新的 left 值就是一个非常重要的点。

按钮实时的 left 值计算 = 滑条的 clientX - 滑条的 offsetLeft - 按钮的 offsetX

原文链接：https://blog.csdn.net/qq_46262422/article/details/124080788