jquery组件，虽然 jquery 语法古老，但是写好了用起来真的很爽啊，本文用滑动人机验证给大家做个详细教程（直接复制代码就可以用噢o(*￣▽￣*)ブ）
第一步 先看下组件本身 component.js
(function() {
// 滑动组件 验证人机
$.fn.slideComponent = function(o) {
// 在这里定义组件的实现逻辑
console.log('滑动组件参数 o :', o)
let div = ` <div class="container huadong">
<canvas width="310" height="155" id="canvas"></canvas>
<canvas width="310" height="155" id="block"></canvas>
<div class="refreshIcon"></div>
<div class="bar">
<div id="bar-mask">
<div class="verSliderBlock" style="background:https://etfinfo.xcf.cn/appletImg/puzzle-right.png !important;backgroundSize:100% !important"></div>
</div>
<span id="slide">向右滑动验证</span>
</div>
</div>`
layer.open({
title: false,
btn: '取消',
closeBtn: 0,
skin: 'diy-huadong-layer',
content: div,
success: function(layero, index) {
$('.diy-huadong-layer').prev().attr("style",
"z-index: 1989101600 !important;background-color: rgb(0, 0, 0);opacity: 0.3;");
},
});
console.log('滑动开始')
var canvas = document.getElementById('canvas');
console.log('滑动开始 canvas', canvas)
var block = document.getElementById('block');
var canvas_ctx = canvas.getContext('2d')
var block_ctx = block.getContext('2d')
var img = document.createElement('img')
var refresh = document.querySelector('.refreshIcon')
var x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
w = 42,
l = 42,
r = 10,
PI = Math.PI
console.log(x, y)
//获取图片后面的随机号码
function getRandomNumberByRange(start, end) {
return Math.round(Math.random() * (end - start) + start)
}
//初始化图片
function initImg() {
img.onload = function() {
canvas_ctx.drawImage(img, 0, 0, 310, 155)
block_ctx.drawImage(img, 0, 0, 310, 155)
var blockWidth = w + r * 2
var _y = y - r * 2 + 2 // 滑块实际的y坐标
var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
block.width = blockWidth
block_ctx.putImageData(ImageData, 0, _y)
};
// 随机滑动验证背景图片
var imgIndex = Math.round(Math.random() * 13 + 1)
let imgUrl = 'https://etfinfo.xcf.cn/appletImg/' + `puzzle-bg${imgIndex}.png`;
console.log('imgUrl:', imgUrl)
img.crossOrigin = "Anonymous"
img.src = imgUrl
// img.src = 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
}
//清除tupian
function clean() {
x = Math.round(Math.random() * 200) + 10,
y = Math.round(Math.random() * 100) + 10,
console.log(x, y)
canvas_ctx.clearRect(0, 0, 310, 155);
block_ctx.clearRect(0, 0, 310, 155)
block.width = 310
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
}
//绘制方块
function draw(ctx, operation) {
ctx.beginPath()
ctx.moveTo(x, y)
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
ctx.lineTo(x + l, y)
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
ctx.lineTo(x + l, y + l)
ctx.lineTo(x, y + l)
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
ctx.lineTo(x, y)
ctx.lineWidth = 2
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
ctx.stroke()
ctx[operation]()
ctx.globalCompositeOperation = 'overlay'
}
initImg()
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
//添加移动事件
var block_slider = document.querySelector("#block");
var slider = document.querySelector(".verSliderBlock");
var slider_mark = document.querySelector("#bar-mask");
//用于判断当前是否是在按住滑块的情况下
var yd = false
var moveX = 0
var downX = 0
//鼠标按下
slider.onmousedown = function(e) {
downX = e.clientX;
yd = true
}
//鼠标移动事件
function hadleMousemove(e) {
if (yd) {
moveX = e.clientX - downX;
document.querySelector('#slide').innerHTML = ''
if (moveX >= 310) {
moveX = 310 - 40
}
if (moveX > -2) {
slider.style.backgroundColor = "#1991FA";
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#1991fa"
slider_mark.style.width = moveX + 40 + "px";
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
slider.style.left = moveX + "px";
}
}
}
//鼠标抬起事件
function hadleMouseup(e) {
if (yd) {
slider.onmousemove = null;
console.log(moveX)
block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) {
slider.style.background = "url('https://etfinfo.xcf.cn/appletImg/puzzle-success.png')";
slider.style.backgroundSize = '100%'
setTimeout(() => {
rest();
var index = layer.open();
layer.close(index);
o(); //滑动验证成功后执行的方法
}, 1000)
} else {
slider_mark.style.backgroundColor = "#fce1e1"
slider_mark.style.borderWidth = "1px"
slider_mark.style.borderColor = "#f57a7a"
slider.style.backgroundColor = "#f57a7a";
slider.style.background = "url('https://etfinfo.xcf.cn/appletImg/puzzle-error.png')";
slider.style.backgroundSize = '100%'
setTimeout(() => {
rest();
}, 1000)
}
yd = false
}
}
//鼠标在按住滑块下移动
slider.onmousemove = function(e) {
hadleMousemove(e)
}
//鼠标在滑块下抬起
slider.onmouseup = function(e) {
hadleMouseup(e)
}
//设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动
document.addEventListener('mousemove', function(e) {
hadleMousemove(e)
})
document.addEventListener('mouseup', function(e) {
hadleMouseup(e)
})
function rest() {
clean()
document.querySelector('#slide').innerHTML = '向右滑动验证'
slider.style.backgroundColor = "#fff";
slider.style.left = "0px"
slider.style.background = "url(https://etfinfo.xcf.cn/appletImg/puzzle-right.png)";
slider.style.backgroundSize = '100%'
block_slider.style.left = "0px"
slider_mark.style.width = "0px"
slider_mark.style.backgroundColor = "#d1e9fe"
slider_mark.style.borderWidth = "0px"
slider_mark.style.borderColor = "#d1e9fe"
initImg()
}
//刷新
refresh.onclick = function() {
rest()
}
};
// $.fn.slideComponent.defaults = {
// slideSuccess(obj)
// };
})();
第二步 具体页面引用
<!-- 滑动验证人机组件 -->
<script type="text/javascript" src="js/component.js"></script> // 点击获取验证码 弹出滑动验证码弹框
$("#loginMoudle").slideComponent(function() {
successLoad(2); //此处是滑动验证通过后希望执行的方法
});
![基于Java开发的个人视频网站的搭建与实现[附源码]](https://img-blog.csdnimg.cn/direct/8115f6ab7fb04933be24020f6c5e99d4.png)
