https://xingkongmt.com/js/slideCaptcha.js?v=1.02

1var currentCaptchaConfig;
2/** 是否打印日志 */
3var isPrintLog = false;
4
5function clearPreventDefault(event) {
6    if (event.preventDefault) {
7        event.preventDefault();
8    }
9}
10
11function clearAllPreventDefault($div) {
12    $div.each(function (index, el) {
13        el.addEventListener('touchmove', clearPreventDefault, false);
14    });
15}
16
17function reductionAllPreventDefault($div) {
18    $div.each(function (index, el) {
19        el.removeEventListener('touchmove', clearPreventDefault);
20    });
21}
22
23function printLog(params) {
24    if (isPrintLog) {
25        console.log(JSON.stringify(params));
26    }
27}
28
29function initConfig(bgImageWidth, bgImageHeight, sliderImageWidth, sliderImageHeight, end) {
30    currentCaptchaConfig = {
31        startTime: new Date(),
32        trackArr: [],
33        movePercent: 0,
34        bgImageWidth:bgImageWidth,
35        bgImageHeight:bgImageHeight,
36        sliderImageWidth:sliderImageWidth,
37        sliderImageHeight:sliderImageHeight,
38        end:end
39    }
40    printLog(["init", currentCaptchaConfig]);
41    return currentCaptchaConfig;
42}
43
44function down(event) {
45    event.preventDefault()
46    const coordinate = getCurrentCoordinate(event);
47    let startX = coordinate.x;
48    let startY = coordinate.y;
49    currentCaptchaConfig.startX = startX;
50    currentCaptchaConfig.startY = startY;
51
52    const pageX = currentCaptchaConfig.startX;
53    const pageY = currentCaptchaConfig.startY;
54    const startTime = currentCaptchaConfig.startTime;
55    const trackArr = currentCaptchaConfig.trackArr;
56    trackArr.push({
57        x: pageX - startX,
58        y: pageY - startY,
59        type: "down",
60        t: (new Date().getTime() - startTime.getTime())
61    });
62    printLog(["start", startX, startY])
63    // pc
64    window.addEventListener("mousemove", move);
65    window.addEventListener("mouseup", up);
66    // 移动
67    window.addEventListener('touchmove', move);
68    window.addEventListener('touchend', up);
69}
70
71function move(event) {
72    if (event.touches && event.touches.length > 0) {
73        event = event.touches[0];
74    }
75    const coordinate = getCurrentCoordinate(event);
76    let pageX = coordinate.x;
77    let pageY = coordinate.y;
78    const startX = currentCaptchaConfig.startX;
79    const startY = currentCaptchaConfig.startY;
80    const startTime = currentCaptchaConfig.startTime;
81    const end = currentCaptchaConfig.end;
82    const bgImageWidth = currentCaptchaConfig.bgImageWidth;
83    const trackArr = currentCaptchaConfig.trackArr;
84    let moveX = pageX - startX;
85    const track = {
86        x: pageX - startX,
87        y: pageY - startY,
88        type: "move",
89        t: (new Date().getTime() - startTime.getTime())
90    };
91    trackArr.push(track);
92    if (moveX < 0) {
93        moveX = 0;
94    } else if (moveX > end) {
95        moveX = end;
96    }
97    currentCaptchaConfig.moveX = moveX;
98    currentCaptchaConfig.movePercent = moveX / bgImageWidth;
99    doMove(currentCaptchaConfig);
100    printLog(["move", track])
101}
102
103function up(event) {
104    window.removeEventListener("mousemove", move);
105    window.removeEventListener("mouseup", up);
106    window.removeEventListener("touchmove", move);
107    window.removeEventListener("touchend", up);
108    const coordinate = getCurrentCoordinate(event);
109    currentCaptchaConfig.stopTime = new Date();
110    let pageX = coordinate.x;
111    let pageY = coordinate.y;
112    const startX = currentCaptchaConfig.startX;
113    const startY = currentCaptchaConfig.startY;
114    const startTime = currentCaptchaConfig.startTime;
115    const trackArr = currentCaptchaConfig.trackArr;
116
117    const track = {
118        x: pageX - startX,
119        y: pageY - startY,
120        type: "up",
121        t: (new Date().getTime() - startTime.getTime())
122    }
123
124    trackArr.push(track);
125    printLog(["up", track])
126    doUp();
127    validCaptcha(currentCaptchaConfig);
128}
129function doUp() {
130
131}
132
133/**
134 * 获取当前坐标
135 * @param event 事件
136 * @returns {{x: number, y: number}}
137 */
138function getCurrentCoordinate(event) {
139    let startX,startY;
140    if (event.pageX) {
141        startX = event.pageX;
142        startY = event.pageY;
143    }
144    let targetTouches;
145    if(event.changedTouches) {
146        // 抬起事件
147        targetTouches = event.changedTouches;
148    } else if(event.targetTouches) {
149        // pc 按下事件
150        targetTouches = event.targetTouches;
151    } else if(event.originalEvent && event.originalEvent.targetTouches) {
152        // 鼠标触摸事件
153        targetTouches = event.originalEvent.targetTouches;
154    }
155    if (!startX && targetTouches[0].pageX) {
156        startX = targetTouches[0].pageX;
157        startY = targetTouches[0].pageY;
158    }
159    if (!startX && targetTouches[0].clientX) {
160        startX = targetTouches[0].clientX;
161        startY = targetTouches[0].clientY;
162    }
163    if (startX && startY) {
164        startX = Math.round(startX);
165        startY = Math.round(startY);
166    }
167    return {
168        x: startX,
169        y: startY
170    }
171}