首页>>表单>>原生js拖动图形验证码(2020-08-21)

原生js拖动图形验证码

原生js拖动图形验证码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <center><div id="slideBar"></div></center>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     var dataList = ["0","1"];  
  3.     var options = {  
  4.         dataList: dataList,  
  5.         success:function(){    
  6.             console.log("show");    
  7.         },  
  8.         fail: function(){  
  9.             console.log("fail");    
  10.         }  
  11.     };  
  12.     SliderBar("slideBar", options);  
  13. </script>  

 

JavaScript Code
  1. (function (window, document) {  
  2.     var SliderBar = function (targetDom, options) {  
  3.         // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了    
  4.         if (!(this instanceof SliderBar)) return new SliderBar(targetDom, options);  
  5.         // 参数  
  6.         this.options = this.extend({  
  7.             dataList: []  
  8.         }, options);  
  9.         // 获取dom  
  10.         this.targetDom = document.getElementById(targetDom);  
  11.         var dataList = this.options.dataList;  
  12.         if (dataList.length > 0) {  
  13.             var html = "<div class='slide-box'><div class='slide-img-block'>" +  
  14.                 "<div class='slide-loading'></div><div class='slide-img-border'>" +  
  15.                 "<div class='scroll-background slide-top'></div><div class='slide-img-div'>" +  
  16.                 "<div class='slide-img-nopadding'><img class='slide-img' id='slideImg' src='' />" +  
  17.                 "<div class='slide-block' id='slideBlock'></div><div class='slide-box-shadow' id='cutBlock'></div></div>" +  
  18.                 "<div class='scroll-background  slide-img-hint-info' id='slideHintInfo'>" +  
  19.                 "<div class='slide-img-hint'><div class='scroll-background slide-icon' id='slideIcon'></div>" +  
  20.                 "<div class='slide-text'><span class='slide-text-type' id='slideType'></span>" +  
  21.                 "<span class='slide-text-content' id='slideContent'></span></div></div></div></div>" +  
  22.                 "<div class='scroll-background slide-bottom'>" +  
  23.                 "<div class='scroll-background slide-bottom-refresh' id='refreshBtn' title='更换图片'></div>" +  
  24.                 "<div class='slide-bottom-no-logo'></div></div></div></div>" +  
  25.                 "<div class='scroll-background scroll-bar'>" +  
  26.                 "<div class='scroll-background slide-btn' id='slideBtn'></div>" +  
  27.                 "<div class='slide-title' id='slideHint'> <-按住滑块，拖动完成上面拼图</div></div></div>";  
  28.             this.targetDom.innerHTML = html;  
  29.             this.slideBtn = document.getElementById("slideBtn");                 // 拖拽按钮  
  30.             this.refreshBtn = document.getElementById("refreshBtn");             // 换图按钮  
  31.             this.slideHint = document.getElementById("slideHint");               // 提示名称  
  32.             this.slideImg = document.getElementById("slideImg");                 // 图片  
  33.             this.cutBlock = document.getElementById("cutBlock");                 // 裁剪区域  
  34.             this.slideBlock = document.getElementById("slideBlock");             // 裁剪的图片  
  35.             this.slideIcon = document.getElementById("slideIcon");               // 正确、失败的图标  
  36.             this.slideType = document.getElementById("slideType");               // 正确、失败  
  37.             this.slideContent = document.getElementById("slideContent");         // 正确、失败的正文  
  38.             this.slideHintInfo = document.getElementById("slideHintInfo");       // 弹出  
  39.             this.resultX = 0;  
  40.             this.startX = 0;  
  41.             this.timer = 0;  
  42.             this.startTamp = 0;  
  43.             this.endTamp = 0;  
  44.             this.x = 0;  
  45.             this.imgWidth = 0;  
  46.             this.imgHeight = 0;  
  47.             this.imgList = [];  
  48.             this.isSuccess = true;  
  49.             for (var i = 1; i < 10; i++) {  
  50.                 this.imgList.push(i + ".jpg");  
  51.             }  
  52.         }  
  53.         this.init();  
  54.     }  
  55.     SliderBar.prototype = {  
  56.         init: function () {  
  57.             this.event();  
  58.         },  
  59.         extend: function (obj, obj2) {  
  60.             for (var k in obj2) {  
  61.                 obj[k] = obj2[k];  
  62.             }  
  63.             return obj;  
  64.         },  
  65.         event: function () {  
  66.             var _this = this;  
  67.             _this.reToNewImg();  
  68.             _this.slideBtn.onmousedown = function(event){  
  69.                 _this.mousedown(_this, event);  
  70.             }   
  71.             _this.refreshBtn.onclick = function(){  
  72.                 _this.refreshBtnClick(_this);  
  73.             }  
  74.         },  
  75.         refreshBtnClick: function(_this){  
  76.             _this.isSuccess = true;  
  77.             _this.slideBlock.style.cssText = "";  
  78.             _this.cutBlock.style.cssText = "";  
  79.             _this.reToNewImg();  
  80.         },  
  81.         reToNewImg: function () {  
  82.             var _this = this;  
  83.             var index = Math.round(Math.random() * 8);         // 该方法有等于0 的情况  
  84.             var imgSrc = "./images/" + _this.imgList[index] + "";  
  85.             _this.slideImg.setAttribute("src", imgSrc);  
  86.             _this.slideBlock.style.backgroundImage = "url("+ imgSrc +")";  
  87.             _this.slideImg.onload = function (e) {  
  88.                 e.stopPropagation();  
  89.                 _this.imgWidth = _this.slideImg.offsetWidth;                   // 图片宽  
  90.                 _this.imgHeight = _this.slideImg.offsetHeight;                 // 图片高  
  91.             }  
  92.         },  
  93.         cutImg: function () {  
  94.             var _this = this;  
  95.             _this.cutBlock.style.display = "block";  
  96.             var cutWidth = _this.cutBlock.offsetWidth;                // 裁剪区域宽  
  97.             var cutHeight = _this.cutBlock.offsetHeight;              // 裁剪区域高  
  98.             // left   
  99.             _this.resultX = Math.floor(Math.random() * (_this.imgWidth - cutWidth * 2 - 4) + cutWidth);  
  100.             // top  
  101.             var cutTop = Math.floor(Math.random() * (_this.imgHeight - cutHeight * 2) + cutHeight);  
  102.             // 设置样式  
  103.             _this.cutBlock.style.cssText = "top:" + cutTop + "px;" + "left:" + _this.resultX + "px; display: block;";  
  104.             _this.slideBlock.style.top = cutTop + "px";  
  105.             _this.slideBlock.style.backgroundPosition = "-" + _this.resultX + "px -" + cutTop + "px";  
  106.             _this.slideBlock.style.opacity = "1";  
  107.         },  
  108.         mousedown: function (_this, e) {  
  109.             e.preventDefault();  
  110.             _this.startX = e.clientX;  
  111.             _this.startTamp = (new Date()).valueOf();  
  112.             var target = e.target;  
  113.             target.style.backgroundPosition = "0 -216px";  
  114.             _this.slideHint.style.opacity = "0";  
  115.             if(_this.isSuccess){  
  116.                 _this.cutImg();  
  117.             }  
  118.             document.addEventListener('mousemove', mousemove);  
  119.             document.addEventListener('mouseup', mouseup);  
  120.           
  121.             // 拖拽  
  122.             function mousemove(event) {  
  123.                 _this.x = event.clientX - _this.startX;  
  124.                 if (_this.x < 0) {  
  125.                     _this.slideBtn.style.left = "0px";  
  126.                     _this.slideBlock.style.left = "2px";  
  127.                 } else if (_this.x >= 0 && _this.x <= 217) {  
  128.                     _this.slideBtn.style.left = _this.x + "px";  
  129.                     _this.slideBlock.style.left = _this.x + "px";  
  130.                 } else {  
  131.                     _this.slideBtn.style.left = "217px";  
  132.                     _this.slideBlock.style.left = "217px";  
  133.                 }  
  134.                 _this.slideBtn.style.transition = "none";  
  135.                 _this.slideBlock.style.transition = "none";  
  136.             };  
  137.             // 鼠标放开  
  138.             function mouseup() {  
  139.                 document.removeEventListener('mousemove', mousemove);  
  140.                 document.removeEventListener('mouseup', mouseup);  
  141.                 var left = _this.slideBlock.style.left;  
  142.                 left = parseInt(left.substring(0, left.length-2));  
  143.                 if(_this.resultX > (left - 2) && _this.resultX < (left + 2)){  
  144.                     _this.isSuccess = true;  
  145.                     _this.endTamp = (new Date()).valueOf();  
  146.                     _this.timer = ((_this.endTamp - _this.startTamp) / 1000).toFixed(1);  
  147.                     // 裁剪图片(拼图的一块)  
  148.                     _this.slideBlock.style.opacity = "0";  
  149.                     _this.slideBlock.style.transition = "opacity 0.6s";  
  150.                     // 裁剪的区域(黑黑的那一块)  
  151.                     _this.cutBlock.style.opacity = "0";  
  152.                     _this.cutBlock.style.transition = "opacity 0.6s";  
  153.                     // 正确弹出的图标  
  154.                     _this.slideIcon.style.backgroundPosition = "0 -1207px";  
  155.                     _this.slideType.className = "slide-text-type greenColor";  
  156.                     _this.slideType.innerHTML = "验证通过:";  
  157.                     _this.slideContent.innerHTML = "用时" + _this.timer + "s";  
  158.                     setTimeout(function(){  
  159.                         _this.cutBlock.style.display = "none";  
  160.                         _this.slideBlock.style.left = "2px";  
  161.                         _this.reToNewImg();  
  162.                     }, 600);  
  163.                     _this.options.success&&_this.options.success();  
  164.                 }else{  
  165.                     _this.isSuccess = false;  
  166.                     // 设置样式  
  167.                     // 裁剪图片(拼图的一块)  
  168.                     _this.slideBlock.style.left = "2px";  
  169.                     _this.slideBlock.style.transition = "left 0.6s";  
  170.                     // 错误弹出的图标  
  171.                     _this.slideIcon.style.backgroundPosition = "0 -1229px";  
  172.                     _this.slideType.className = "slide-text-type redColor";  
  173.                     _this.slideType.innerHTML = "验证失败:";  
  174.                     _this.slideContent.innerHTML = "拖动滑块将悬浮图像正确拼合";  
  175.                     _this.options.fail&&_this.options.fail();  
  176.                 }  
  177.                 // 设置样式  
  178.                 _this.slideHintInfo.style.height = "22px";  
  179.                 setTimeout(function(){  
  180.                     _this.slideHintInfo.style.height = "0px";  
  181.                 }, 1300);  
  182.                 _this.slideBtn.style.backgroundPosition = "0 -84px";  
  183.                 _this.slideBtn.style.left = "0";  
  184.                 _this.slideBtn.style.transition = "left 0.6s";  
  185.                 _this.slideHint.style.opacity = "1";  
  186.             }  
  187.         }  
  188.     }  
  189.     window.SliderBar = SliderBar;  
  190. }(window, document));  

 


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