html滑动验证到最右边,jQuery滑块拖动到最右边验证插件

jQuery滑块拖动到最右边验证插件是一款简单实用的滑块验证插件,鼠标按住滑块拖动到最右边即可通过验证。

73eccd91566fd6291e666099da9c5e50.png

查看演示

下载资源:

23

次 下载资源

下载积分:

20

积分

js代码

$(function(){

console.log(parseFloat('1px'))

var SlideVerifyPlug = window.slideVerifyPlug;

var slideVerify = new SlideVerifyPlug('#verify-wrap',{

wrapWidth:'450',//设置 容器的宽度 ,默认为 350 ,也可不用设,你自己css 定义好也可以,插件里面会取一次这个 容器的宽度

initText:'请按住滑块,123', //设置 初始的 显示文字

sucessText:'验证通过最右边最右边最右边',//设置 验证通过 显示的文字

getSucessState:function(res){

//当验证完成的时候 会 返回 res 值 true,只留了这个应该够用了

console.log(res);

}

});

$("#resetBtn").on('click',function(){

slideVerify.resetVerify();//可以重置 插件 回到初始状态

})

$("#getState").on('click',function(){

alert(slideVerify.slideFinishState); //这个可以拿到 当前验证状态 是否完成

})

var slideVerify2 = new SlideVerifyPlug('#verify-wrap2',{

wrapWidth:'300',

initText:'请按住滑块',

sucessText:'验证通过',

});

$("#resetBtn2").on('click',function(){

slideVerify2.resetVerify();

})

$("#getState2").on('click',function(){

alert(slideVerify2.slideFinishState);

})

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery滑动验证是一种常用的网页验证码形式,其源码可以实现用户通过滑动块来验证身份。下面是基本的jQuery滑动验证源码分析: 1. 首先,需要引入jQuery库,确保在HTML文件中有以下代码: ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 2. 在HTML文件中,需要有以下基本结构: ```html <div class="slider"> <div class="slider-bar"></div> <div class="slider-block"></div> </div> ``` 3. 接下来,在JavaScript中,需要使用jQuery选择器和事件处理来实现滑动验证的功能: ```javascript $(document).ready(function() { var isMouseDown = false; var sliderBar = $(".slider-bar"); var sliderBlock = $(".slider-block"); var offsetX = 0; // 鼠标按下事件 sliderBlock.mousedown(function(e) { isMouseDown = true; offsetX = e.pageX - $(this).offset().left; // 计算鼠标距离块左边的位置 }); // 鼠标移动事件 $(document).mousemove(function(e) { if (isMouseDown) { var left = e.pageX - offsetX - sliderBar.offset().left; // 计算块的相对位置 if (left >= 0 && left <= sliderBar.width() - sliderBlock.width()) { sliderBlock.css("left", left); // 移动块 } } }); // 鼠标松开事件 $(document).mouseup(function(e) { if (isMouseDown) { isMouseDown = false; var left = e.pageX - offsetX - sliderBar.offset().left; if (left >= (sliderBar.width() - sliderBlock.width())) { sliderBlock.css("left", (sliderBar.width() - sliderBlock.width())); // 到最右边验证通过 alert("验证通过!"); } else { sliderBlock.animate({left: 0}, 200); // 回原位 } } }); }); ``` 通过上述代码,就可以实现一个基本的jQuery滑动验证功能。具体的样式和动画效果可以根据需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值