首页>>表单>>jQuery拖动滑块完成验证代码(2016-07-23)

jQuery拖动滑块完成验证代码

 非常简单的代码

jQuery拖动滑块完成验证代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. /*  
  2.  * drag 1.0 
  3.  * create by tony@jentian.com 
  4.  * date 2015-08-18 
  5.  * 拖动滑块 
  6.  */  
  7. (function($){  
  8.     $.fn.drag = function(options){  
  9.         var x, drag = this, isMove = false, defaults = {  
  10.         };  
  11.         var options = $.extend(defaults, options);  
  12.         //添加背景，文字，滑块  
  13.         var html = '<div class="drag_bg"></div>'+  
  14.                     '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+  
  15.                     '<div class="handler handler_bg"></div>';  
  16.         this.append(html);  
  17.           
  18.         var handler = drag.find('.handler');  
  19.         var drag_bg = drag.find('.drag_bg');  
  20.         var text = drag.find('.drag_text');  
  21.         var maxWidth = drag.width() - handler.width();  //能滑动的最大间距  
  22.           
  23.         //鼠标按下时候的x轴的位置  
  24.         handler.mousedown(function(e){  
  25.             isMove = true;  
  26.             x = e.pageX - parseInt(handler.css('left'), 10);  
  27.         });  
  28.           
  29.         //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离  
  30.         $(document).mousemove(function(e){  
  31.             var _x = e.pageX - x;  
  32.             if(isMove){  
  33.                 if(_x > 0 && _x <= maxWidth){  
  34.                     handler.css({'left': _x});  
  35.                     drag_bg.css({'width': _x});  
  36.                 }else if(_x > maxWidth){  //鼠标指针移动距离达到最大时清空事件  
  37.                     dragOk();  
  38.                 }  
  39.             }  
  40.         }).mouseup(function(e){  
  41.             isMove = false;  
  42.             var _x = e.pageX - x;  
  43.             if(_x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置  
  44.                 handler.css({'left': 0});  
  45.                 drag_bg.css({'width': 0});  
  46.             }  
  47.         });  
  48.           
  49.         //清空事件  
  50.         function dragOk(){  
  51.             handler.removeClass('handler_bg').addClass('handler_ok_bg');  
  52.             text.text('验证通过');  
  53.             drag.css({'color': '#fff'});  
  54.             handler.unbind('mousedown');  
  55.             $(document).unbind('mousemove');  
  56.             $(document).unbind('mouseup');  
  57.         }  
  58.     };  
  59. })(jQuery);  
XML/HTML Code
  1. <div id="drag"></div>  
  2. <script type="text/javascript">  
  3. $('#drag').drag();  
  4. </script>  

 


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