pc移动端 js滑块验证 自适应插件(不支持IE)

1、介绍

pc 移动端 -js 滑块验证 自适应插件； 自适应自动跳转样式，修改样式，圆角，边框，背景，颜色等

2、使用说明
引入：

[HTML] 纯文本查看 复制代码

<script src="./js/sliderVerif.js"></script>

使用:
#box 插入位置的类名或id   {} 参数

[JavaScript] 纯文本查看 复制代码

var box = new sliderVerif("#box", {
    sliderText: "请按住滑块拖动",// 滑块提示文字
    succText: "验证通过",// 滑块完成提示文字
    sliderTextColor: "#666",//滑块提示文字颜色
    succTextColor: "#fff",//滑块完成提示文字颜色
    fontSize: 1,//字体大小  数字/字符串 字符串可以带单位 ，数字默认单位 em
    /**
     * 盒子 样式
     */
    boxStyle: {
        bg: "#e5e5e5",//背景颜色  颜色名称，RGB,RGBA,16进制
        barBg: "#5abc3c",// 进度条 背景颜色   颜色名称，RGB,RGBA,16进制
        radius: 0,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius
        borderWidth: 0,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#333",//边框颜色  颜色名称，RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
    },
    /**
     * 按钮 样式
     */
    btnStyle: {
        color: "#333",// 按钮 图标颜色   颜色名称，RGB,RGBA,16进制
        succColor: "#5abc3c",//滑动完成 图标颜色    颜色名称，RGB,RGBA,16进制
        bg: "#fff",//按钮背景颜色    颜色名称，RGB,RGBA,16进制
        succBg: "#fff",//滑动完成 背景颜色    颜色名称，RGB,RGBA,16进制
        radius: null,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius，不是数字和字符串，使用 boxStyle.radius
        borderWidth: 1,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#e5e5e5",//边框颜色   颜色名称，RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
    },
    // 是否监听屏幕变化，自动修改响应式样式
    isResizeAutoStyle: false,
    //返回状态方法
    getCompleteState: (res) => {
        console.log(res);
    },
});

完整版本：

付费内容

游客，您好！如果您要查看本帖隐藏内容请向楼主支付20积分

立即购买