首页>>表单>>图片拖动滑块验证(2021-09-29)

图片拖动滑块验证

图片拖动滑块验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.     <input value="admin" readonly/>  
  3.     <input type="password" value="1234567890" readonly/>  
  4.     <div id="captcha" style="position: relative"></div>  
  5.     <div id="msg"></div>  
  6. </div>  

 

CSS Code
  1. .block {  
  2.   position: absolute;  
  3.   left: 0;  
  4.   top: 0;  
  5. }  
  6.   
  7. .sliderContainer {  
  8.   position: relative;  
  9.   text-align: center;  
  10.   width: 310px;  
  11.   height: 40px;  
  12.   line-height: 40px;  
  13.   margin-top: 15px;  
  14.   background: #f7f9fa;  
  15.   color: #45494c;  
  16.   border: 1px solid #e4e7eb;  
  17. }  
  18.   
  19. .sliderContainer_active .slider {  
  20.   height: 38px;  
  21.   top: -1px;  
  22.   border: 1px solid #1991FA;  
  23. }  
  24.   
  25. .sliderContainer_active .sliderMask {  
  26.   height: 38px;  
  27.   border-width: 1px;  
  28. }  
  29.   
  30. .sliderContainer_success .slider {  
  31.   height: 38px;  
  32.   top: -1px;  
  33.   border: 1px solid #52CCBA;  
  34.   background-color: #52CCBA !important;  
  35. }  
  36.   
  37. .sliderContainer_success .sliderMask {  
  38.   height: 38px;  
  39.   border: 1px solid #52CCBA;  
  40.   background-color: #D2F4EF;  
  41. }  
  42.   
  43. .sliderContainer_success .sliderIcon {  
  44.   background-position: 0 0 !important;  
  45. }  
  46.   
  47. .sliderContainer_fail .slider {  
  48.   height: 38px;  
  49.   top: -1px;  
  50.   border: 1px solid #f57a7a;  
  51.   background-color: #f57a7a !important;  
  52. }  
  53.   
  54. .sliderContainer_fail .sliderMask {  
  55.   height: 38px;  
  56.   border: 1px solid #f57a7a;  
  57.   background-color: #fce1e1;  
  58. }  
  59.   
  60. .sliderContainer_fail .sliderIcon {  
  61.   background-position: 0 -83px !important;  
  62. }  
  63. .sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {  
  64.   display: none;  
  65. }  
  66.   
  67. .sliderMask {  
  68.   position: absolute;  
  69.   left: 0;  
  70.   top: 0;  
  71.   height: 40px;  
  72.   border: 0 solid #1991FA;  
  73.   background: #D1E9FE;  
  74. }  
  75.   
  76. .slider {  
  77.   position: absolute;  
  78.   top: 0;  
  79.   left: 0;  
  80.   width: 40px;  
  81.   height: 40px;  
  82.   background: #fff;  
  83.   box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);  
  84.   cursor: pointer;  
  85.   transition: background .2s linear;  
  86. }  
  87.   
  88. .slider:hover {  
  89.   background: #1991FA;  
  90. }  
  91.   
  92. .slider:hover .sliderIcon {  
  93.   background-position: 0 -13px;  
  94. }  
  95.   
  96. .sliderIcon {  
  97.   position: absolute;  
  98.   top: 15px;  
  99.   left: 13px;  
  100.   width: 14px;  
  101.   height: 10px;  
  102.   background: url(../img/icon_light.f13cff3.png) 0 -26px;  
  103.   background-size: 34px 471px;  
  104. }  
  105.   
  106. .refreshIcon {  
  107.   position: absolute;  
  108.   rightright: 0;  
  109.   top: 0;  
  110.   width: 34px;  
  111.   height: 34px;  
  112.   cursor: pointer;  
  113.   background: url(../img/icon_light.f13cff3.png) 0 -437px;  
  114.   background-size: 34px 471px;  
  115. }  

 


原文地址:http://www.freejs.net/article_biaodan_917.html