JS代碼：/*??* 拖動(dòng)滑塊?*/(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">拖動(dòng)滑塊驗(yàn)證</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(); ?//能滑動(dòng)的最大間距? ? ? ??? ? ? ? //鼠標(biāo)按下時(shí)候的x軸的位置? ? ? ? handler.mousedown(function(e){? ? ? ? ? ? isMove = true;? ? ? ? ? ? x = e.pageX - parseInt(handler.css('left'), 10);? ? ? ? });? ? ? ??? ? ? ? //鼠標(biāo)指針在上下文移動(dòng)時(shí)，移動(dòng)距離大于0小于最大間距，滑塊x軸位置等于鼠標(biāo)移動(dòng)距離? ? ? ? $(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){ ?//鼠標(biāo)指針移動(dòng)距離達(dá)到最大時(shí)清空事件? ? ? ? ? ? ? ? ? ? dragOk();? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }).mouseup(function(e){? ? ? ? ? ? isMove = false;? ? ? ? ? ? var _x = e.pageX - x;? ? ? ? ? ? if(_x < maxWidth){ //鼠標(biāo)松開(kāi)時(shí)，如果沒(méi)有達(dá)到最大距離位置，滑塊就返回初始位置? ? ? ? ? ? ? ? handler.css({'left': 0});? ? ? ? ? ? ? ? drag_bg.css({'width': 0});? ? ? ? ? ? }? ? ? ? });? ? ? ? //清空事件? ? ? ? function dragOk(){? ? ? ? ? ? handler.removeClass('handler_bg').addClass('handler_ok_bg');? ? ? ? ? ? text.text('驗(yàn)證通過(guò)'); ?/* */? ? ? ? ? ? var vo = ?'1';? ? ? ? ? ? drag.css({'color': '#fff'});? ? ? ? ? ? handler.unbind('mousedown');? ? ? ? ? ? $(document).unbind('mousemove');? ? ? ? ? ? $(document).unbind('mouseup');? ? ? ? ? ??? ? ? ? }? ? ? ?? ? };})(jQuery);