php 漂亮的滑动验证码 – 元素领域(zxar520.com)

发表评论
1,025

A+

所属分类：PHP学习

自己研究： jQuery拖拽滑动验证码插件 slideunlock.js

原理：

响应时间，拖拽速度，时间，位置，轨迹，重试次数等。
这些因素能够构成一个采样结果或者辨识特性。

只获取到滑动时间，滑动的长度。

效果：

php 漂亮的滑动验证码

html页面

<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;
                            // 获取到滑动使用的时间 滑动的宽度
            alert( numTime );
            alert( sli_width );
});
             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>

<span id="label">>></span> <span id="labelTip">拖动滑块验证</span>

</div>

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;

// 获取到滑动使用的时间滑动的宽度

alert( numTime );

alert( sli_width );

});

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>

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;
}

#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效果

/**
 * jquery plugin -- jquery.slideunlock.js
 * www.sucaijiayuan.com
 * created: March 27, 2016
 */

;(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);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

/**

* jquery plugin -- jquery.slideunlock.js

* www.sucaijiayuan.com

* created: March 27, 2016

;(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);

发表评论取消回复

登录 找回密码

登录找回密码