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


Posted in jQuery onJanuary 30, 2018

jquery的绿色拖动验证功能

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

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

体验地址:http://yanshi.sucaihuo.com/jquery/8/897/demo/

其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>
jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
jQuery代码优化方法总结
Jan 29 #jQuery
jquery写出PC端轮播图实例
Jan 26 #jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Python中求对数方法总结
2020/03/10 Python
Python异常处理机制结构实例解析
2020/07/23 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
农民入党思想汇报
2014/01/03 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
留守儿童工作方案
2014/06/02 职场文书
小学综合实践活动总结
2014/07/07 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2015年党性分析材料
2014/12/19 职场文书
高三复习计划
2015/01/19 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
新手初学Java网络编程
2021/07/07 Java/Android
Python Matplotlib库实现画局部图
2021/11/17 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL