php 滑块验证,实现一个滑块验证功能

最近写了点小东西一个滑动验证

*{

margin: 0px;

padding: 0px;

}

body{

background: #000000;

}

.sliding{

width: 400px;

height: 40px;

margin: 50px auto;

background: #ccc;

text-align: center;

line-height: 40px;

position: relative;

}

.sliding > p{

width: 0px;

height: 100%;

position: absolute;

top: 0;

left: 0;

background: green;

z-index: 99;

color: #FFFFFF;

text-align: center;

overflow: hidden;

}

.sliding > span{

display: block;

width: 46px;

height: 100%;

position: absolute;

top: 0;

left: 0;

background-size: cover;

cursor: pointer;

z-index: 999;

}

.span1_back{

background: url(img/sli1.png) no-repeat center center;

}

.span2_back{

background: url(img/sli2.png)no-repeat center center;

}

请按住滑块，拖至最右侧。

$(function(){

$('.sliding > span').on('mousedown',function(ev){

var down_X=ev.clientX; //获取鼠标摁下的位置

var p_W=$('.sliding > p').get(0).offsetWidth; //获取p的宽度当然这其实这个可有可无

var span_X=$('.sliding > span').get(0).offsetLeft; //与上同理

$(document).get(0).οnmοusemοve=function(ev){

var move_X=ev.clientX; //获取鼠标移动的位置

var size = move_X - down_X + p_W; //用移动过后的位置减去鼠标摁下的位置加上p的宽度或者 span 的left 值 因为俩者是同步的 所以 减去 其中一个就好

if(size>0){// 移动的时候判断size>0的时候执行，Math.min选取最小值，让拖动过程中不至于超出

size=Math.min(($('.sliding').get(0).offsetWidth - $('.sliding > span').get(0).offsetWidth),size);

}else{ //小于0的时候 size =0； 防止有无聊的用户拖回 超出边界。

size=0;

}

$('.sliding > p').css('width', size + 'px');

$('.sliding > span').css('left', size + 'px');

return false;//防止拖拽过程中选中文字

}

$(document).get(0).οnmοuseup=function(){ //鼠标松开执行

//判段span到达边界时候执行

if(($('.sliding > span').get(0).offsetLeft) >= ($('.sliding').get(0).offsetWidth - $('.sliding > span').get(0).offsetWidth)){

$('.sliding > span').attr('class','span2_back'); //更改span的背景图片

$('.sliding > p').text('验证通过'); //更改p标签中的内容

$('.sliding > span').off('mousedown');//删除鼠标摁下方法防止用户 无聊往回 推拽

}else{//判断没到达边界让它再回到起点

$('.sliding > span').animate({left:'0px'},300); //利用jquery让p 和 span 回到起始状态

$('.sliding > p').animate({width:'0px'},300);

}

$(document).get(0).οnmοusemοve=null; //最后让 鼠标移动 和 鼠标松开 事件停止

$(document).get(0).οnmοuseup=null;

}

})

})