Sliding unlocking, PC、 Mobile Adaptive

Article summary

AI is generating summary

This article introduces the method of adding sliding unlock verification to blog comments. Comments can be submitted only after passing the sliding unlock verification. The code implementation is applicable to blogs with different topics, not specific to Z-Blog. The HTML structure, CSS style and JavaScript logic of sliding unlocking are described in detail, including the implementation methods of mobile terminal and PC terminal.

Today, I added a sliding unlock verification to the comment part of the blog , the comment submit button is gray before verification, and can be submitted only after sliding verification.

It's really useless ..

Sliding unlocking, PC、 Mobile Adaptive Page 1

The implementation code is as follows. Please copy and modify it yourself. Because everyone uses different themes, it is not necessary to create a plug-in specifically for 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>Slide to unlock</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> Please hold down the slider and drag to the far right</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=" Submit "> <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();         }     } //Slide to unlock movement     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 side         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 ('Verified by<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;             };         }; //Mobile terminal         var cont = $("#slide_btn");         var startX = 0, sX = 0, moveX = 0,leftX = 0; Cont. on ({//Binding event             touchstart: function (e) {                 startX = e.originalEvent.targetTouches[0].pageX; //Obtain the X coordinate of the click point                 sX = $(this).offset().left; //Offset relative to the X axis of the current window LeftX=startX - sX;//The leftmost end that the mouse can move is the current position from the left of the div             },             touchmove: function (e) {                 e.preventDefault();                 moveX = e.originalEvent.targetTouches[0].pageX; //Coordinate of X axis during movement                 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 ('Verified by<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>

Sliding unlocking, PC、 Mobile adaptation