jQuery滑块拖动到最右边验证插件-站长技术网

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

时间:2019-11-15 10:32:29 来源:网络收集作者:不详点击:次

源码授权：免费特效运行环境： jQuery 源码大小： 36 KB
普通会员
点击下载

jQuery滑块拖动到最右边验证插件是一款简单实用的滑块验证插件，鼠标按住滑块拖动到最右边即可通过验证。
js代码
<script src="js/jquery.min.js"></script>
    <script src="js/jq-slideVerify.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(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);
            })
        })
    </script>