1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>验证滑块</title> 7 </head> 8 <body> 9 <style> 10 label { 11 display: block; 12 width: 260px; 13 margin: 25px auto 0; 14 text-align: center; 15 height:40px; 16 border:1px solid #ccc; 17 position: relative; 18 } 19 .doc{ 20 box-shadow: 0 0 8px #333; 21 } 22 #chage{ 23 line-height:38px; 24 font-size:15px; 25 position: absolute; 26 top:0; 27 left:0; 28 width:0px; 29 height:38px; 30 background:#ccc; 31 color:#fff; 32 } 33 #move{ 34 position: absolute; 35 top:0; 36 left:0; 37 width:40px; 38 height:38px; 39 background:#ccc; 40 display: flex; 41 justify-content: center; 42 align-items: center; 43 } 44 #do{ 45 width:20px; 46 height:20px; 47 border:2px solid #fff; 48 background:#ccc; 49 border-radius: 50%; 50 } 51 </style> 52 <label> 53 <div id="chage"></div> 54 <div id="move"> 55 <div id="do"></div> 56 </div> 57 </label> 58 <script> 59 var move=find('move'); 60 var chage=find('chage'); 61 var dos=find('do'); 62 var parent=move.parentNode; 63 var max=parent.offsetWidth-move.offsetWidth; 64 var mw=move.offsetWidth; 65 move.onmousedown=function(ev){ 66 var startx=ev.clientX; 67 var starty=ev.clientY; 68 dos.classList.add('doc'); 69 document.onmousemove=function(ev){ 70 var movex=ev.clientX; 71 var len=movex-startx; 72 if(len>=0 && len<=max) 73 { 74 chage.style.width=len+"px"; 75 move.style.left=len+'px'; 76 } 77 78 } 79 } 80 function close(obj){ 81 obj.parentNode.removeChild(obj); 82 } 83 document.onmouseup=function(ev){ 84 var endx=ev.clientX; 85 var endy=ev.clientY; 86 document.onmousemove=null; 87 move.onmousedown=null; 88 chage.style.width="100%"; 89 close(move); 90 if("对比数据") 91 { 92 chage.innerText="验证码获取失败"; 93 } 94 else{ 95 chage.innerText="验证码获取成功"; 96 } 97 } 98 function find(str,type="id"){ 99 return type=='id'?document.getElementById(str):document.getElementsByClassName(str); 100 } 101 </script> 102 </body> 103 </html>
效果图：
