支付宝的滑块验证效果，又刷新了大家对于验证码的认知，这种滑块效果，改善了用户体验。除了它外观和用户体验上的优秀外，其实它的安全性也并未降低，后端对用户行为的分析依然保证了安全校验。

下面我们在此介绍一下，滑块效果的前端实现。

涵盖的内容主要： 滑块前端样式(html排版)，滑块的闪光移动效果(CSS3 动画)，以及滑块滑动脚本的编写(javascript 移动，点击，拖拽事件的编写。)

备注： 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题。大家直接粘贴代码到对应的文件，便可直接运行。

运行结果

首先给出几张效果图。

滑块前端HTML

滑动

.slidetounlock{

font-size: 12px;

background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

-webkit-animation:slidetounlock 3s infinite;

-webkit-text-size-adjust:none

}

@-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}

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

HTML 滑块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("../img/slider.png") no-repeat center;

}

.handler_ok_bg{

background: #fff url("../img/complet.png") no-repeat center;

}

#drag .drag_bg{

background-color: #7ac23c;

height: 34px;

width: 0px;

}

#drag .drag_text{

position: absolute;

top: 0px;

width: 300px;

color:#9c9c9c;

-moz-user-select: none;

-webkit-user-select: none;

user-select: none;

-o-user-select:none;

-ms-user-select:none;

font-size: 12px; // add

}

滑块拖拽JS

/**

* Created by shuai_wy on 2017/3/14.

*/

$.fn.drag = function(options) {

var x, drag = this, isMove = false, defaults = {

};

var options = $.extend(defaults, options);

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;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = 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.removeClass('slidetounlock').text('验证通过').css({'color':'#fff'}); //modify

// drag.css({'color': '#fff !important'});

handler.css({'left': maxWidth}); // add

drag_bg.css({'width': maxWidth}); // add

handler.unbind('mousedown');

$(document).unbind('mousemove');

$(document).unbind('mouseup');

}

};

仿支付宝滑块效果下载链接

Demo下载链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。