当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery与vue实现拖动验证码功能

jQuery与vue实现拖动验证码功能

2018年02月09日 | 移动技术网IT编程 | 我要评论

jquery的绿色拖动验证功能

在网上看到了一个这样的问题：那种像拖动滑块匹配图形的验证方式是怎么实现的？。

突然想到实现一个简单绿色拖动验证码的功能，在网上搜了下，有一个用jquery实现的该功能代码。

体验地址：

其css代码：

#drag{ 
  position: relative;
  background-color: #e8e8e8;
  width: 300px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
#drag .handler{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg{
  background: #fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==") no-repeat center;
}
.handler_ok_bg{
  background: #fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==") no-repeat center;
}
#drag .drag_bg{
  background-color: #7ac23c;
  height: 34px;
  width: 0px;
}
#drag .drag_text{
  position: absolute;
  top: 0px;
  width: 300px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select:none;
  -ms-user-select:none; 
}

html代码结构：

<center style="margin-top: 100px">
  <div id="drag"></div>
</center>

js调用方式：

$('#drag').drag();

js实现代码：

(function($){
  $.fn.drag = function(options){
    var x, drag = this, ismove = false, defaults = {
    };
    var options = $.extend(defaults, options);
    //添加背景，文字，滑块
    var html = '<div class="drag_bg"></div>'+
          '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
          '<div class="handler handler_bg"></div>';
    this.append(html);
    
    var handler = drag.find('.handler');
    var drag_bg = drag.find('.drag_bg');
    var text = drag.find('.drag_text');
    var maxwidth = drag.width() - handler.width(); //能滑动的最大间距
    
    //鼠标按下时候的x轴的位置
    handler.mousedown(function(e){
      ismove = true;
      x = e.pagex - parseint(handler.css('left'), 10);
    });
    
    //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
    $(document).mousemove(function(e){
      var _x = e.pagex - x;
      if(ismove){
        if(_x > 0 && _x <= maxwidth){
          handler.css({'left': _x});
          drag_bg.css({'width': _x});
        }else if(_x > maxwidth){ //鼠标指针移动距离达到最大时清空事件
          dragok();
        }
      }
    }).mouseup(function(e){
      ismove = false;
      var _x = e.pagex - x;
      if(_x < maxwidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
        handler.css({'left': 0});
        drag_bg.css({'width': 0});
      }
    });
    
    //清空事件
    function dragok(){
      handler.removeclass('handler_bg').addclass('handler_ok_bg');
      text.text('验证通过');
      drag.css({'color': '#fff'});
      handler.unbind('mousedown');
      $(document).unbind('mousemove');
      $(document).unbind('mouseup');
    }
  };
})(jquery);

vue的绿色拖动验证功能

html结构：

<template>
  <div id="drag">
    <div class="drag_bg weui-btn_primary" :style="{width:curw+'px'}"></div>
    <div class="drag_text" onselectstart="return false;" unselectable="on":class="[isdragok ? 'whitecolor':'']">{{text}}</div>
    <div class="handler" :style="{left:curw+'px'}" :class="[isdragok ? 'handler_ok_bg':'handler_bg']"></div>
  </div>
</template>

css代码：

<style scoped>
#drag {
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
#drag .drag_bg {
  height: 36px;
  width:0;
}
#drag .drag_text {
  position: absolute;
  top: 0px;
  width: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
.drag_text.whitecolor{
  color:#fff;
}
#drag .handler {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 34px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg {
  background:#fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==") no-repeat center
}
.handler_ok_bg {
  background:#fff url("data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==") no-repeat center
}
</style>

js代码：

<script>
export default{
  name:'slider',
  props:{
    
  },
  data(){
    return{
      curw:0,
      ismove:false, //是否在运动
      isdragok:false, //是否拖动成功
      maxwidth:0, //拖动的最大宽度
      element:{},
      text:'拖动滑块验证',
      currentpos:{
        x: 0,
        y: 0
      }
    }
  },
  created(){
    
  },
  mounted () {
    var self = this;
    this.element = document.queryselector('.handler');
    this.getmaxwidth();
    window.addeventlistener('resize',function(){self.getmaxwidth()});
    window.addeventlistener('orientationchange',function(){self.getmaxwidth()});
    
    
     this.element.addeventlistener('touchstart',self.touchstartfun,false);
    document.queryselector('body').addeventlistener('touchmove',self.touchmovefun,false);
    document.queryselector('body').addeventlistener('touchend',self.touchendfun,false);
    
    this.element.addeventlistener('mousedown',self.touchstartfun,false);
    document.queryselector('body').addeventlistener('mousemove',self.touchmovefun,false);
    document.queryselector('body').addeventlistener('mouseup',self.touchendfun,false);
    
    (function drawanimate() {
      if( self.curw <= self.maxwidth){
        window.requestanimframe(drawanimate,1000/60);
        self.curw = self.currentpos.x;
      }else{
        self.curw = self.currentpos.x = self.maxwidth;
      }
    })();
  },
  watch:{
    
  },
  methods:{
    touchstartfun(e){
      if(this.isdragok){
         e.preventdefault();
         return;
       }
      this.ismove = true;
      this.curw = this.currentpos.x = this.getcurrentposition(e).x;
    },
    touchmovefun(e){
      if(this.ismove && this.curw > 0 && this.curw < this.maxwidth){
        this.currentpos.x = this.getcurrentposition(e).x;
      }
      else if(this.ismove && this.curw >= this.maxwidth){
        this.curw = this.currentpos.x = this.maxwidth;
        this.isdragok = true;
        this.text = "验证通过";
      }
    },
    touchendfun(e){
      this.ismove = false;
      if(this.curw < this.maxwidth){
        this.curw = this.currentpos.x = 0;
      }
    },
    
    getcurrentposition(event){
      var xpos, ypos, rect;
      rect = document.getelementbyid('drag').getboundingclientrect();
      //event = event.originalevent;
      //判断是touch，还是鼠标事件
      if (event.type.indexof('touch') !== -1) {
        xpos = event.touches[0].clientx - rect.left;
        ypos = event.touches[0].clienty - rect.top;
      }
      
      //鼠标事件
      else {
        xpos = event.clientx - rect.left;
        ypos = event.clienty - rect.top;
      }
      return {
        x: xpos,
        y: ypos
      }
    },
    getmaxwidth(){
      this.maxwidth = document.queryselector("#drag").clientwidth - document.queryselector(".handler").scrollwidth;
    }
  }
}
</script>

页面引用方式：

<slider></slider>

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

vue前端cli3脚手架实现多页面配置

1.先在src下创建个文件夹，我的文件夹名字叫view，然后再文件夹中再创建两个文件夹，一个是index，另一个... [阅读全文]
vue源码实战render.js与$nextTick的异步调用

今日目标：render.js 额外目标：$nextTick的异步路径：src\core\instance\ren... [阅读全文]
js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站：返回顶部我们可以用锚点链接来实现，但是锚点链接它突... [阅读全文]
JS函数传参时值传递与引用传递的区别

大家都知道在计算机内存中js的数据类型分为基础数据类型和引用数据类型基础数据类型number / string ... [阅读全文]
JavaScript开发中如何防抖(前端更好的用户体验)

在前端开发中会遇到一些频繁的事件触发，比如：resize、scroll、mousedown、mousemove、... [阅读全文]
做一个网页送给心动女孩子生日礼物(表白也合适)

如何做一个网页送给女朋友做生日礼物本文里面涉及到python，HTML ，css,JavaScript的知识，是... [阅读全文]
three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是郭先生的微信二维码哦！1. 解析图片流canvas = docum... [阅读全文]
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！

最近线上监控 SFTP 连接频繁爆表，通过重启某个系统，连接数迅速下降，系统就能恢复正常，初步判断是应用程序连接... [阅读全文]
Redis实现自定义序列化方式

1. 如何实现redis的序列化？序列化：把对象转换为字节序列的过程称为对象的序列化。反序列化：把字节序列恢复为... [阅读全文]
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇

基本数据类型：String,Boolean,Number,Undefined,Null引用数据类型：Object... [阅读全文]