jquery利用sliderVerif插件实现滑块验证功能，下面web建站小编给大家简单介绍一下！
1、定义一个div
<div class="box" id="box"></div> <button onclick="boxRe()">重置</button>
2、sliderVerif.js插件
(function (win) {
"use strict";
var _this = null;
// 内部方法 insertEleStr：插入对象 options:参数
var sliderVerification = function (insertEleStr = "", options = {}) {
if (!insertEleStr) throw "insertEleStr 无效，请填写插入父级类名或ID";
_this = this;
// 参数
this.options = {
sliderText: "请按住滑块拖动",// 滑块提示文字
succText: "验证通过",// 滑块完成提示文字
sliderTextColor: "#666",//滑块提示文字颜色 颜色名称，RGB,RGBA,16进制
succTextColor: "#fff",//滑块完成提示文字颜色 颜色名称，RGB,RGBA,16进制
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) => { },
...options
};
// 内置变量
this.isComplete = false;//是否完成
this.step = 15;//步长，回到原点的速度
// 滑块整体对象
this._slider_verif_ = null;
// 滑块
this._slider_bar = null;
// 塞入位置的父级元素
this.insertEle = document.querySelector(insertEleStr);
// 初始化
this.init();
// 监听屏幕变化
this.resizeTimer = null;
if (this.options.isResizeAutoStyle) {
win.addEventListener("resize", () => {
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.upStyle();
}, 100)
})
};
};
// 原型链
sliderVerification.prototype = {
// 初始化
init() {
// 创建 html
this.create();
// 创建css
this.createCss();
// 添加事件
this.addEvent();
},
// 创建 html
create() {
// 创建元素
var _slider_verif_ = document.createElement("div");
_slider_verif_.className = "_slider_verif_";
_slider_verif_.innerHTML = `
<span>${this.options.sliderText}</span>
<div class="_slider_bar">
<div class="_slider_span">
<span>${this.options.sliderText}</span>
</div>
<p class="_slider_btn"></p>
</div>
`;
// 塞入
this.insertEle.appendChild(_slider_verif_);
// 保存 对象
this._slider_verif_ = _slider_verif_;
this._slider_bar = _slider_verif_.querySelector("._slider_bar");
},
// 创建css
createCss() {
// 获取 父级 高宽
var insertEleStrW = this.insertEle.clientWidth;
var insertEleStrH = this.insertEle.clientHeight;
// 设置 盒子 样式
var boxStyle = JSON.parse(JSON.stringify(this.options.boxStyle || {}));
// 判断圆角，设置单位
boxStyle.radius = typeof boxStyle.radius == 'number' ? boxStyle.radius += 'px' : boxStyle.radius;
// 判断边框宽度，设置单位
boxStyle.borderWidth = typeof boxStyle.borderWidth == 'number' ? boxStyle.borderWidth += 'px' : boxStyle.borderWidth;
// 设置 按钮 样式
var btnStyle = JSON.parse(JSON.stringify(this.options.btnStyle || {}));
// 判断边框宽度，设置单位
btnStyle.borderWidth = typeof btnStyle.borderWidth == 'number' ? btnStyle.borderWidth += 'px' : btnStyle.borderWidth;
// 判断 圆角 ，设置单位
switch (typeof btnStyle.radius) {
case 'number':// 数字 ,添加单位
btnStyle.radius += 'px';
break;
case 'string': // 字符串，不需要动
btnStyle.radius = btnStyle.radius;
break;
default: // unll undefined , 没有设置，就是用 盒子 boxStyle.radius 属性
btnStyle.radius = boxStyle.radius;
break;
};
// 设置字体
var fontSize = this.options.fontSize;
typeof fontSize == 'number' ? fontSize += 'em' : fontSize;
var css = `
._slider_verif_ {
/* 盒子宽度，设置bar>span宽度 */
--slider_verif_wid: ${insertEleStrW || 0}px;
/* 盒子高度，设置按钮高度 */
--slider_verif_hei: ${insertEleStrH || 0}px;
/* 滑动前 文字颜色 */
--slider_text_color: ${this.options.sliderTextColor};
/* 滑动完成 文字颜色 */
--slider_succ_text_color: ${this.options.succTextColor};
/* 字体大小 */
--slider_fontsize:${fontSize};
/* 盒子 样式 */
--slider_verif_bg:${boxStyle.bg};
--slider_verif_barbg:${boxStyle.barBg};
--slider_verif_radius: ${boxStyle.radius};
--slider_verif_border_w:${boxStyle.borderWidth};
--slider_verif_border_c:${boxStyle.borderColor};
--slider_verif_border_s:${boxStyle.borderStyle};
/* 按钮 样式 */
--slider_btn_color:${btnStyle.color};
--slider_btn_succColor:${btnStyle.succColor};
--slider_btn_bg:${btnStyle.bg};
--slider_btn_succBg:${btnStyle.succBg};
--slider_btn_radius: ${btnStyle.radius};
--slider_btn_border_w:${btnStyle.borderWidth};
--slider_btn_border_c:${btnStyle.borderColor};
--slider_btn_border_s:${btnStyle.borderStyle};
}
@font-face {
font-family: "iconfont";
src: '';
}
._slider_verif_ *{
margin: 0;
padding: 0;
}
._slider_verif_{
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
overflow: hidden;
user-select: none;
background-color: #fff;
font-size: 14px;
border: 1px solid #333;
color: #666;
border-radius: var(--slider_verif_radius);
border-width: var(--slider_verif_border_w);
border-style: var(--slider_verif_border_s);
border-color: var(--slider_verif_border_c);
background-color: var(--slider_verif_bg);
color:var(--slider_text_color);
}
._slider_verif_ span{
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 1em;
font-size: var(--slider_fontsize);
}
._slider_verif_ ._slider_bar{
position: absolute;
z-index: 5;
width: 0;
min-width:var(--slider_verif_hei);
height: 100%;
top: 0;
left: 0;
overflow: hidden;
color: #fff;
background-color:#5abc3c;
color:var(--slider_succ_text_color);
border-radius: var(--slider_btn_radius);
background-color:var(--slider_verif_barbg);
}
._slider_bar ._slider_span{
width: var(--slider_verif_wid);
height: 100%;
position: relative;
}
._slider_btn{
position: absolute;
z-index: 3;
top: 0;
right: 0;
width: var(--slider_verif_hei);
height: 100%;
cursor: pointer;
border: 1px solid #e5e5e5;
box-sizing: border-box;
color: #666;
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center;
font-family: "iconfont";
background-color: #fff;
background-color: var(--slider_btn_bg);
border-radius: var(--slider_btn_radius);
border-width: var(--slider_btn_border_w);
border-style: var(--slider_btn_border_s);
border-color: var(--slider_btn_border_c);
}
._slider_btn::before{
content: "\\e6b5";
color:var(--slider_btn_color);
}
/* 完成样式 */
._slider_verif_._slider_verif_complete ._slider_btn{
background-color: var(--slider_btn_succBg);
}
._slider_verif_._slider_verif_complete ._slider_btn::before{
content: "\\e600";
color:var(--slider_btn_succColor);
}
`;
var style = document.createElement('style');
style.type = 'text/css';
style.id = "_slider_verif_";
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
},
// 添加 事件
addEvent() {
var _slider_btn = this._slider_verif_.querySelector("._slider_btn");
// pc，拖动事件
_slider_btn.addEventListener("mousedown", this.btnMousedown);
// 移动，触摸 拖动事件
_slider_btn.addEventListener("touchstart", this.btnTouchstart);
},
// 按钮按下事件,鼠标
btnMousedown(e) {
e.preventDefault();
// 判断是否完成
if (_this.isComplete) return;
var insertEleStrW = _this.insertEle.clientWidth;
// 点击位置
var clientX = e.clientX;
// 拖动
document.onmousemove = (e) => {
// 移动距离
var move = e.clientX - clientX;
// 判断 移动距离是否达到 最大
if (move >= insertEleStrW) {
move = insertEleStrW;
};
// 设置样式
_this._slider_bar.style.width = move + "px";
// 判断 是否完成
if (move >= insertEleStrW) {
_this.slideComplete();
btnUp();
};
};
// 松开鼠标
document.onmouseup = (e) => {
btnUp();
};
var btnUp = () => {
document.onmousemove = null;
document.onmouseup = null;
// 判断是否未完成
if (!_this.isComplete) {
// 回到原点
_this.backOrigin(_this.step);
};
btnUp = null;
};
},
// 按钮按下事件，触摸
btnTouchstart(e) {
e.preventDefault();
// 判断是否完成
if (_this.isComplete) return;
var insertEleStrW = _this.insertEle.clientWidth;
// 点击位置
var clientX = e.touches[0].clientX;
// 拖动
document.ontouchmove = (e) => {
// 移动距离
var move = e.touches[0].clientX - clientX;
// 判断 移动距离是否达到 最大
if (move >= insertEleStrW) {
move = insertEleStrW;
};
// 设置样式
_this._slider_bar.style.width = move + "px";
// 判断 是否完成
if (move >= insertEleStrW) {
_this.slideComplete();
btnUp();
};
};
// 松开鼠标
document.ontouchend = (e) => {
btnUp();
};
var btnUp = () => {
document.ontouchmove = null;
document.ontouchend = null;
// 判断是否未完成
if (!_this.isComplete) {
// 回到原点
_this.backOrigin(_this.step);
};
btnUp = null;
};
},
// 回到原点
backOrigin(step) {
var wid = this._slider_bar.clientWidth;//宽度
var btn_w = this._slider_verif_.querySelector("._slider_btn").offsetWidth;
wid = wid - step;
// 最小位置是 在 按钮宽度位置
if (wid - btn_w <= 0) wid = 0;
this._slider_bar.style.width = wid + 'px';
if (wid <= 0) {
// 可以继续滑动
this.isComplete = false;
} else {
step--;
if (step <= 8) step = 8;
setTimeout(() => {
this.backOrigin(step);
}, 2);
};
},
// 滑动完成
slideComplete() {
this.isComplete = true;
// 添加完成类
this._slider_verif_.classList.add("_slider_verif_complete");
// 修改 提示文字
this.modifyUpText(this.options.succText);
// 返回完成状态
this.options.getCompleteState(true);
},
// 修改 上层提示文案
modifyUpText(text) {
var span = this._slider_bar.querySelector("._slider_span").querySelector("span");
span.innerText = text;
},
// 销毁
destroy() {
this._slider_verif_.remove();
clearTimeout(this.resizeTimer);
},
// 重置
reset() {
this.modifyUpText(this.options.sliderText);
this.backOrigin(this.step);
// 移除完成类
this._slider_verif_.classList.remove("_slider_verif_complete");
},
// 更新样式(屏幕变化)
upStyle() {
// 获取 父级 高宽
var insertEleStrW = this.insertEle.clientWidth;
var insertEleStrH = this.insertEle.clientHeight;
console.log(insertEleStrW, insertEleStrH);
// 只需要更新 的 css变量
this._slider_verif_.style.setProperty("--slider_verif_wid", insertEleStrW + 'px');
this._slider_verif_.style.setProperty("--slider_verif_hei", insertEleStrH + 'px');
},
};
// 外部方法,单列模式
var sliderVerif = null;
var sliderVerifFunc = function (insertEleStr = "", options = {}) {
if (sliderVerif) sliderVerif.destroy();
sliderVerif = new sliderVerification(insertEleStr, options);
};
// 重置
sliderVerifFunc.prototype.reset = function () {
sliderVerif.reset();
};
// 更新样式
sliderVerifFunc.prototype.upStyle = function () {
sliderVerif.upStyle();
};
win.sliderVerif = sliderVerifFunc;
})(this);
3、页面调用：
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);
},
});
function boxRe() {
box.reset();
}
当前插件不兼容IE浏览器~
javascript语法如何把json文件输出到html页面上
标签： jquery滑块验证, sliderVerif
上面是“jquery实现滑块验证功能”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_3820.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
