首页>>表单>>滑动图片转正验证(2020-07-16)

滑动图片转正验证

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

 

XML/HTML Code
  1. <div id="rotateWrap" style="margin-top:50px;">  
  2.       
  3. </div>  
  4. <div style="text-align: center;margin-top: 50px;">  
  5.     <button type="button" id="resetBtn" style="height: 30px;">重置</button>  
  6.     <button type="button" id="testBtn" style="height: 30px;">状态测试</button>  
  7. </div>  
  8. <div id="rotateWrap2" style="margin-top:50px;">  
  9.       
  10. </div>  
  11. <script type="text/javascript">  
  12.     $(function(){  
  13.         //1  
  14.         var myRotateVerify = new RotateVerify('#rotateWrap',{  
  15.             initText:'滑动将图片转正',//默认  
  16.             slideImage:['image/1.jpg','image/2.jpg','image/4.jpg'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'  
  17.             slideAreaNum:10,// 误差范围角度 +- 10(默认)  
  18.             getSuccessState:function (res) {//验证通过 返回  true;  
  19.                 console.log('例1' + res);  
  20.             }  
  21.         })  
  22.         //重置   
  23.         $("#resetBtn").on('click',function(){  
  24.             myRotateVerify.resetSlide();  
  25.         })  
  26.         //可拿到 验证状态   
  27.         $("#testBtn").on('click',function(){  
  28.             alert(myRotateVerify.verifyState);  
  29.         })  
  30.           
  31.         //2  
  32.         var myRotateVerify2 = new RotateVerify('#rotateWrap2',{  
  33.             initText:'滑动将图片转正',//默认  
  34.             slideImage:'image/4.jpg',//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'  
  35.             slideAreaNum:10,// 误差范围角度 +- 10(默认)  
  36.             getSuccessState:function (res) {//验证通过 返回  true;  
  37.                 console.log('例2' + res);  
  38.             }  
  39.         })  
  40.     })  
  41. </script>  

 


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