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>