jquery的绿色拖动验证功能
在网上看到了一个这样的问题：那种像拖动滑块匹配图形的验证方式是怎么实现的？。
突然想到实现一个简单绿色拖动验证码的功能，在网上搜了下，有一个用jquery实现的该功能代码。
体验地址：http://yanshi.sucaihuo.com/jquery/8/897/demo/。
其CSS代码：
#drag{ position: relative; background-color: #e8e8e8; width: 300px; height: 34px; line-height: text-align: center; } #drag .handler{ position: absolute; top: 0px; left: 40px; 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{} #drag .drag_bg{ #7ac23c; 0px; } #drag .drag_text{ -moz-user-select: none; -webkit-user-select: user-select: -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 = (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((e){ isMove = true; x = e.pageX - parseInt(handler.css('left'),10); }); 鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离 $(document).mousemove((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(false; if(_x < maxWidth){ 鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置 handler.css({'left': 0}); drag_bg.css({'width': 0}); } }); 清空事件 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> class="drag_bg weui-btn_primary" :style="{width:curW+'px'}"="drag_text" onselectstart="return false;" unselectable="on":class="[isDragOk ? 'whitecolor':'']">{{text}}="handler"="{left:curW+'px'}" :class="[isDragOk ? 'handler_ok_bg':'handler_bg']">
CSS代码：
<style scoped> #drag { 100%; 36px; #drag .drag_bg {0; } #drag .drag_text { none; } .drag_text.whitecolor{ color:#fff; } #drag .handler { .handler_bg {#fff url("data:image/png;BoxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center } .handler_ok_bg {} </style>
JS代码：
<script> export default{ name:'slider',props:{ },data(){ return{ curW:0是否在运动 isDragOk:是否拖动成功 maxWidth:0,1)">拖动的最大宽度 element:{},text:'拖动滑块验证'0 } } },created(){ },mounted () { var self = this.element = document.querySelector('.handler'.getMaxWidth(); window.addEventListener('resize',1)">(){self.getMaxWidth()}); window.addEventListener('orientationchange',1)">(){self.getMaxWidth()}); this.element.addEventListener('touchstart',self.touchstartFun,1)">); document.querySelector('body').addEventListener('touchmove',self.touchmoveFun,1)">); document.querySelector('body').addEventListener('touchend',self.touchendFun,1)">); this.element.addEventListener('mousedown',1)">); document.querySelector('body').addEventListener('mousemove',1)">); document.querySelector('body').addEventListener('mouseup',1)">); ( 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(.isDragOk){ e.preventDefault(); ; } this.isMove = this.curW = this.currentPos.x = .getCurrentPosition(e).x; },touchmoveFun(e){ this.isMove && this.curW > 0 && this.curW < .maxWidth){ .getCurrentPosition(e).x; } this.curW >= .maxWidth; this.isDragOk = ; this.text = "验证通过"; } },touchendFun(e){ this.currentPos.x = 0var 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; } 鼠标事件 { xPos = event.clientX - rect.left; yPos = event.clientY - rect.top; } { x: xPos,y: yPos } },getMaxWidth(){ this.maxWidth = document.querySelector("#drag").clientWidth - document.querySelector(".handler").scrollWidth; } } } </script>
页面引用方式：
slider>
