Many sites have generally proven sliding function, simply slide the verification principle as shown below:
The main idea of understanding the line drawing code and may differ from the actual write HTML and CSS can also be modified according to carefully trying to be difficult hi
Complete code:
user-select: none; 16 } 17 18 .bg { 19 height: 100%; 20 position: absolute; 21 width: 40px; 22 background-color: rgb(39, 233, 21); 23 } 24 25 .text { 26 width: 100%; 27 height: 100%; 28 position: absolute; 29 text-align: center; 30 line-height: 40px; 31 } 32 33 .btn { 34 width: 40px; 35 height: 38px; 36 border: 1px solid #ccc; 37 background-color: #fff; 38 color: #666; 39 line-height: 38px; 40 text-align: center; 41 position: absolute; 42 cursor: move; 43 } 44 </style> 45 </head> 46 47 <body> 48 <div class="drag"> 49 <div class="bg"></div> 50 <div class="text" onselectstart="return false;">滑动验证</div> 51 <div class="btn">>></div> 52 </div> 53 </body> 54 <script> 55 onload = function () { 56 function $(a) { 57 return document.querySelector(a);//获取元素的函数 58 } 59 var oDarg = $(".drag"); 60 var oBg = $(".bg"); 61 is var oText = $ (. "Text" ); 62 is var oBtn = $ ( "BTN." ); 63 is var Success = to false ; // determines whether authentication is successful 64 var Distance = oDarg.offsetWidth - oBtn.offsetWidth; // successful authentication from 65 oBtn.onmousedown = function (Eve) {// set the mouse down event was to block 66 oBg.style.transition = "" ; // disposed behind the transition property must be cleared after the press or click event bolus will cause movement of the self-test specific bug 67 oBtn.style.transition = "" ; 68 var E = || Eve the window.event; 69 var downX =e.clientX; // Get the mouse coordinates with respect to just press the browser page 70 document.onmousemove = function (Eve) {// this document is provided to give the mouse movement events can not be set if the block was set block movement thereof there are also self-testing small bug 71 is var E = || Eve the window.event; 72 var Movex = e.clientX; mouse coordinates relative movement // Get the browser page 73 is var offsetX = Movex - downX; // was block moves a distance 74 IF (offsetX> distance) {// if the moving distance has become greater than this distance should be moved so that it will be provided to verify the success of the distance 75 offsetX = distance; 76 } the else IF (offsetX <0 ) Similarly {// if the movement distance is less than 0 is set to 0 to ensure that it does not exceed the range of 77 = 0 offsetX ; 78 } 79 oBtn.style.left offsetX + = "PX" ; 80 oBg.style.width offsetX + = "PX" ; 81 IF (offsetX == Distance) {// Analyzing verified by 82 oText.innerHTML = "verified" ; 83 oBtn.innerHTML = "& Radic;" ; 84 oText.style.color = "#FFF" ; 85 oBtn.style.color = "RGB (39, 233, 21 is)" ; 86 Success = to true ; // verify conditions by 87 document.onmousemove = null ; // validate mouse down event and moved by the mouse with no need to clear the Thus 88 oBtn.onmousedown = null ; 89 the setTimeout ( function () { 90 Alert ( "successfully unlocked" ); 91 }, 10 ) 92 } 93 } 94 } 95 document.onmouseup = function () {// here is a mouse up event to a document set 96 IF (success) {if it has been verified successfully the function ends 97 return; 98 } the else {// the other hand does not pass the verification block to the original position was 99 oBtn.style.left = 0 ; 100 oBg.style.width = 0 ; 101 oBg.style.transition = "width lS EASE" ; 102 oBtn = .style.transition "left lS EASE" ; 103 } 104 document.onmousemove = null ; // returns to the original position during the movement required to clear the mouse event and mouse up event 105 oBtn.onmouseup = null ; 106 } 107 } 108 </ Script> 109 </html>
Complete results:
General site has sliding authentication, understand that principle, the use of native JS is not difficult to write, hoping to help you!