AI正在生成摘要
文章介绍了在博客评论部分添加滑动解锁验证的方法，通过滑动滑块验证通过后才能提交评论。代码实现适用于不同主题的博客，不特定于Z-Blog。详细描述了滑动解锁的HTML结构、CSS样式和JavaScript逻辑，包括移动端和PC端的实现方式。
今天把博客的评论部分加了一个滑动解锁验证，未验证前评论提交按钮为灰色状态，滑动验证通过后才能提交。
实际没啥鸟用...
实现代码如下，请自行拷贝修改，因为每个人用的主题不同，就不专门针对Z-Blog做一个插件了。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>滑动解锁</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
#slide_box {
width: 100%;
height: 42px;
text-align: center;
line-height: 42px;
font-size: 14px;
color: #717171;
background-color: #e8e8e8;
border: none;
margin-bottom: 20px;
}
#slide_xbox {
width: 50px;
height: 42px;
text-align: center;
line-height: 42px;
font-size: 16px;
color: #fff;
position: absolute;
background: #35b34a;
}
#slide_btn {
cursor: pointer;
width: 50px;
height: 42px;
background-color: #fff;
float: right;
-webkit-box-shadow: 0px 0px 15px 0px #ddd;
-moz-box-shadow: 0px 0px 15px 0px #ddd;
box-shadow: 0px 0px 15px 0px #ddd;
color: #8a8c97;
}
#slide_btn > .iconfont {
font-size: 20px;
}
.prohibit {
cursor: no-drop !important;
background: #b2afaf !important;
}
</style>
</head>
<body>
<div id="slide_box">
<div id="slide_xbox">
<div id="slide_btn"> <span>>></span> <img src="" alt=""> </div>
</div>
请按住滑块，拖动到最右边 </div>
<input id="resetBtn" type="submit" name="sub" style="display: inline-block;border:0;width: 105px;height: 38px;line-height: 38px;text-align: center;background: #409EFF;border-radius: 3px;color: #FFF;cursor: pointer;" value="提交" >
<script type="text/javascript">
var locked;
window.onload = function () {
slide();
}
window.onresize = function () {
if(locked==true){
var boxWidth = $('#slide_box').width();
$('#slide_xbox').width(boxWidth);
}else{
slide();
}
}
//滑动解锁移动
function slide() {
var slideBox = $('#slide_box')[0];
var slideXbox = $('#slide_xbox')[0];
var btn = $('#slide_btn')[0];
var slideBoxWidth = slideBox.offsetWidth;
var btnWidth = btn.offsetWidth;
//pc端
btn.ondragstart = function () {
return false;
};
btn.onselectstart = function () {
return false;
};
btn.onmousedown = function (e) {
var disX = e.clientX - btn.offsetLeft;
document.onmousemove = function (e) {
var objX = e.clientX - disX + btnWidth;
if (objX < btnWidth) {
objX = btnWidth
}
if (objX > slideBoxWidth) {
objX = slideBoxWidth
}
$('#slide_xbox').width(objX + 'px');
};
document.onmouseup = function (e) {
var objX = e.clientX - disX + btnWidth;
if (objX < slideBoxWidth) {
objX = btnWidth;
} else {
objX = slideBoxWidth;
locked = true;
$('#slide_xbox').html('验证通过<div id="slide_btn"><span style="color: #35b34a;">√</span></div>');
$('#resetBtn').removeClass('prohibit');
$('#resetBtn').attr('disabled', false);
}
$('#slide_xbox').width(objX + 'px');
document.onmousemove = null;
document.onmouseup = null;
};
};
//移动端
var cont = $("#slide_btn");
var startX = 0, sX = 0, moveX = 0,leftX = 0;
cont.on({//绑定事件
touchstart: function (e) {
startX = e.originalEvent.targetTouches[0].pageX;//获取点击点的X坐标
sX = $(this).offset().left;//相对于当前窗口X轴的偏移量
leftX = startX - sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
},
touchmove: function (e) {
e.preventDefault();
moveX = e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
var objX = moveX - leftX + btnWidth;
if (objX < btnWidth) {
objX = btnWidth
}
if (objX > slideBoxWidth) {
objX = slideBoxWidth
}
$('#slide_xbox').width(objX + 'px');
},
touchend: function (e) {
var objX = moveX - leftX + btnWidth;
if (objX < slideBoxWidth) {
objX = btnWidth;
} else {
objX = slideBoxWidth;
locked = true;
$('#slide_xbox').html('验证通过<div id="slide_btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>');
$('#resetBtn').removeClass('prohibit');
$('#resetBtn').attr('disabled', false);
}
$('#slide_xbox').width(objX + 'px');
}
});
}
$('#resetBtn').addClass('prohibit');
$('#resetBtn').attr('disabled', true);
</script>
</body>
</html>