<! 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 ('Verification passed<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 of the mouse 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 ('Authentication passed<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>