• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

仿淘宝滑动验证码效果 slideunlock.js

JavaScript web前端中文站 2年前 (2018-04-22) 2774次浏览 已收录 2个评论

前面 web 前端中文站介绍了《实现滑动验证码简介及原理分析》,发现大家都喜欢看。今天给大家介绍一个被广泛应用的淘宝滑动验证码效果(模仿)实例。

仿淘宝滑动验证码效果 slideunlock.js

淘宝滑动验证框

SlideUnlock.js 简介

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

jQuery 插件 slideunlock 实现手机端滑动解锁特效源码是一款 jquery.slideunlock 插件实现的仿 iPhone 手机滑动解锁插件,是一款非常优秀的特效源码(jQuery 拖拽滑动验证码插件 slideunlock.js CSDN下载地址)

 

 

slideunlock 实例

<link href="css/slide-unlock.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<div id="slider">
<div id="slider_bg"></div>
<span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
</div>
<script>
var startTime = 0;
??? var endTime = 0;
??? var numTime = 0;
??? $(function () {
??? ???????? var slider = new SliderUnlock("#slider",{
??????? ???????? successLabelTip : "欢迎注册"
??????? },function(){
    var? sli_width = $("#slider_bg").width();
??????????? alert("验证成功");
??????????? endTime = nowTime();
??????????? numTime = endTime-startTime;
??????????? endTime = 0;
?????????? ?startTime = 0;
????????????// 获取到滑动使用的时间 滑动的宽度
});
??? ???????? slider.init();
})
/**

?* 获取时间精确到毫秒

* @type

?*/

function nowTime(){
var myDate = new Date();
var H = myDate.getHours();//获取小时
var M = myDate.getMinutes(); //获取分钟
var S = myDate.getSeconds();//获取秒
var MS = myDate.getMilliseconds();//获取毫秒
var milliSeconds = H * 3600 * 1000 + M * 60 * 1000 + S * 1000 + MS;
return milliSeconds;
}
</script>
<script src="js/jquery.slideunlock.js"></script>

css 样式

#slider {
  margin: 10px 5%;
  width: 90%;
  height: 40px;
  position: relative;
  border-radius: 8px;
  background-color: #dae2d0;
  overflow: hidden;
  text-align: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

#slider_bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #7AC23C;
  z-index: 1;
}

#label {
  width: 46px;
  position: absolute;
  left: 0;
  top: 0;
  height: 38px;
  line-height: 38px;
  border: 1px solid #cccccc;
  background: #fff;
  z-index: 3;
  cursor: move;
  color: #ff9e77;
  font-size: 16px;
  font-weight: 900;
}

#labelTip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-family: 'Microsoft Yahei', serif;
  color: #787878;
  line-height: 38px;
  text-align: center;
  z-index: 2;
}

js 代码

;(function ($,window,document,undefined) {
    function SliderUnlock(elm, options, success){
        var me = this;
        var $elm = me.checkElm(elm) ? $(elm) : $;
        success = me.checkFn(success) ? success : function(){};
        var opts = {
            successLabelTip:  "Successfully Verified",
            duration:  200,
            swipestart:  false,
            min:  0,
            max:  $elm.width(),
            index:  0,
            IsOk:  false,
            lableIndex:  0
        };
        opts = $.extend(opts, options||{});
        //$elm
        me.elm = $elm;
        //opts
        me.opts = opts;
        //是否开始滑动
        me.swipestart = opts.swipestart;
        //最小值
        me.min = opts.min;
        //最大值
        me.max = opts.max;
        //当前滑动条所处的位置
        me.index = opts.index;
        //是否滑动成功
        me.isOk = opts.isOk;
        //滑块宽度
        me.labelWidth = me.elm.find('#label').width();
        //滑块背景
        me.sliderBg = me.elm.find('#slider_bg');
        //鼠标在滑动按钮的位置
        me.lableIndex = opts.lableIndex;
        //success
        me.success = success;
    }
    SliderUnlock.prototype.init = function () {
        var me = this;
        me.updateView();
        me.elm.find("#label").on("mousedown", function (event) {
            var e = event || window.event;
            me.lableIndex = e.clientX - this.offsetLeft;
            me.handerIn();
        }).on("mousemove", function (event) {
            me.handerMove(event);
        }).on("mouseup", function (event) {
            me.handerOut();
        }).on("mouseout", function (event) {
            me.handerOut();
        }).on("touchstart", function (event) {
            var e = event || window.event;
            me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
            me.handerIn();
        }).on("touchmove", function (event) {
            me.handerMove(event, "mobile");
        }).on("touchend", function (event) {
            me.handerOut();
        });
    };
    /**
     * 鼠标/手指接触滑动按钮
     */
    SliderUnlock.prototype.handerIn = function () {
        var me = this;
        me.swipestart = true;
        var myDate = new Date();
        var H = myDate.getHours();//获取小时
        var M = myDate.getMinutes(); //获取分钟
        var S = myDate.getSeconds();//获取秒
        var MS = myDate.getMilliseconds();//获取毫秒
        var milliSeconds = H * 3600 * 1000 + M * 60 * 1000 + S * 1000 + MS;
        startTime = milliSeconds;
        me.min = 0;
        me.max = me.elm.width();
    };

    /**
     * 鼠标/手指移出
     */
    SliderUnlock.prototype.handerOut = function () {
        var me = this;
        //停止
        me.swipestart = false;
        weizhi = me.labelWidth;
        //me.move();
        if (me.index < me.max) {
            me.reset();
        }
    };
    /**
     * 鼠标/手指移动
     * @param event
     * @param type
     */
    SliderUnlock.prototype.handerMove = function (event, type) {
        var me = this;
        if (me.swipestart) {
            event.preventDefault();
            event = event || window.event;
            if (type == "mobile") {
                me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
            } else {
                me.index = event.clientX - me.lableIndex;
            }
            me.move();
        }
    };
    /**
     * 鼠标/手指移动过程
     */
    SliderUnlock.prototype.move = function () {
        var me = this;
        if ((me.index + me.labelWidth) >= me.max) {
            me.index = me.max - me.labelWidth -2;
            //停止
            me.swipestart = false;
            //解锁
            me.isOk = true;
        }
        if (me.index < 0) {
            me.index = me.min;
            //未解锁
            me.isOk = false;
        }
        if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {
            //解锁默认操作
            $('#label').unbind().next('#labelTip').
            text(me.opts.successLabelTip).css({'color': '#fff'});

            me.success();
        }
        me.updateView();
    };
    /**
     * 更新视图
     */
    SliderUnlock.prototype.updateView = function () {
        var me = this;

        me.sliderBg.css('width', me.index);
        me.elm.find("#label").css("left", me.index + "px")
    };
    /**
     * 重置 slide 的起点
     */
    SliderUnlock.prototype.reset = function () {
        var me = this;
        startTime = 0;
        me.index = 0;
        me.sliderBg .animate({'width':0},me.opts.duration);
        me.elm.find("#label").animate({left: me.index}, me.opts.duration)
            .next("#lableTip").animate({opacity: 1}, me.opts.duration);
        me.updateView();
    };

    /**
     * 检测元素是否存在
     * @param elm
     * @returns {boolean}
     */
    SliderUnlock.prototype.checkElm = function (elm) {
        if($(elm).length > 0){
            return true;
        }else{
            throw "this element does not exist.";
        }
    };
    /**
     * 检测传入参数是否是 function
     * @param fn
     * @returns {boolean}
     */
    SliderUnlock.prototype.checkFn = function (fn) {
        if(typeof fn === "function"){
            return true;
        }else{
            throw "the param is not a function.";
        }
    };
    window['SliderUnlock'] = SliderUnlock;
})(jQuery, window, document);

仿淘宝滑动验证码效果

以下是仿淘宝滑动验证框的效果图:

仿淘宝滑动验证码效果 slideunlock.js

仿淘宝滑动验证码效果图

学习拓展

前面介绍的是利用 jQuery 库中的SlideUnlock.js来实现,另外还有更多的验证方式,如点触式验证和行为式验证,它们是利用TOUCLICK来实现的,具体可结合《触式验证码 滑动验证码 拖拽验证码 TOUCLICK 使用教程》来比较学习,因为比较的学习是最快的,也是最有效的。

 


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:仿淘宝滑动验证码效果 slideunlock.js
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 你好,请问怎么弄滑块重置?
    小晴天2019-09-20 10:09 回复
  2. 请问怎么设置 “重置滑块”?比方说我已经右滑解锁成功了,给它一个重置按钮,把它变成为解锁的状态。谢谢~
    小晴天2019-09-20 09:47 回复