滑动验证（原创）

Html

Css

* {
	margin:0;
	padding:0;
}
#SlidingVerification {
	width:300px;
	height:40px;
	background-color:#eee;
	margin:50px auto;
	position:relative;
}
.sv-text {
	position:absolute;
	top:0;
	left:0;
	height:40px;
	width:100%;
	text-align:center;
	line-height:40px;
	font-size:14px;
	color:#333;
	z-index:1;
}
.sv-btn {
	width:40px;
	height:40px;
	border:1px solid #ccc;
	box-sizing:border-box;
	background-color:#fff;
	cursor:pointer;
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	background-position:center;
	background-repeat:no-repeat;
	background-size:50% auto;
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACwElEQVRoQ9WZ23XUMBCGZyogJdABSwVk3AChApIKSCpgUwF0QKgAaMD/UgGhAqACQgXiDEfhOF5dxrpsvHrZh7Wt/xtpLhoxHfngI9dPUQAAJyJyVwpY+7513iAAgE9EdOY/shWRa+sHAWyICER0QkS3RHQhIvrbZewBALgkonez2W5E5MKiAMAPIno6eVZXUXpBhAC2RPQ2INYEAcAF3u0GEQI4J6IPEWtficj71EqM43jLzM8OBRHzgRsieh0Rqnta/w8O9QHn3I6ZnwQe+ElEz2uCw/ybqSjUC0IdWn2iOMJNIZJ5AMDqIbKJbO0QWQBdrnEcdU+/6OAT1dvJBKBZ1TtmKLooV9axiehbxABVECYAnbgBRCo8F0OYAdYKsQjACPFKRD4n8kTTlVgMYIDIlg0AmkEUARwAwlR3qY5igLVAVAGsAaIa4LEhmgB4iFQVWuvYUZ9oBmCAyJbSAPSs8WbJWaQpgAFCy+hd6kAUKx6dc1+HYTg1nwdSk2QEpGK8HmaiB3wtV3xDQBsD8/FFRO4bDf//a7oCmQT1UUQULjgy4vWd4Oo1A0iJd859H4YhZNV/MAbx0Wq3CUBOPDOfxo6QNeKrM7G3XnTPq+V7iq8GqLG8h592AOe+kTwk3T9cvIUAaEjTFuLeyFnei9feU8ypTeKLV2DW/3wAcEjxRQBrEr8YYG3iFwF0Fn8tItpUXjxMTpwR/4uZN6lWIYCUwyYzdI4oC5AR/8fH+VR90018dgutXXwSoIH4VG1ftW2m2yp2PzC955rHecu2SZXUzcQHVyBVXDnnViU+BhC65COLeF8i/PY3lPMA0tTy0VoIwN4ln1W8Bwhd8nURH1uBB0XaEvEeQPuiLyfm7yY+GoUAnDnnLplZ2yF60W2+qPY+tHXObZh5V5phcwmsupy2TtD7uWwm7i2g9vtHD/AX4BtFT2Li2V4AAAAASUVORK5CYII=');
}
.sv-bg {
	position:absolute;
	top:0; 
	left:0;
	height:100%;
	background-color:#7ac23c;
}

/**
 * 滑动验证
 *
 * @param {*} dom 元素id
 */
function SlidingVerification(dom) {

/**
     * 引入动态css样式表
     *
     * @param {*} url 路径
     */
    function loadStyle(url) {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
    }
    loadStyle('SlidingVerification.css');

/**
     * 选择器封装
     *
     * @param {*} name 选择器名字
     * @returns DOM
     */
    function $(name) {
        if (name.indexOf("#") != -1) {
            return document.getElementById(name.split('#')[1]);
        } else {
            return document.querySelector(name);
        }
    }

//插入 子DOM
    var _html = '<div class="sv-btn"></div><p class="sv-text">拖动滑块验证</p><div class="sv-bg"></div>';

//验证 
    var _sv_box = $(dom);
    _sv_box.innerHTML = _html;
    var _sv_btn = $('.sv-btn'); //滑块
    var _sv_text = $('.sv-text'); //文字
    var _sv_bg = $('.sv-bg'); //背景
    var _sv_flag = false; //默认值验证未成功
    _sv_btn.onmousedown = function(event) {
        var downX = event.clientX;
        _sv_btn.onmousemove = function(event) {

var moveX = event.clientX - downX;
            //最小的移动范围
            if (moveX > 0) {
                this.style.left = moveX + 'px'; //设置滑动块的距离
                _sv_bg.style.width = moveX + 'px'; //设置背景的宽度
                //最大的移动范围
                if (moveX >= _sv_box.offsetWidth - this.offsetWidth) {
                    //验证成功
                    _sv_flag = true;
                    //文字提醒
                    _sv_text.innerText = '通过验证';
                    _sv_text.style.color = '#fff';
                    //事件清除
                    this.onmousedown = null;
                    this.onmousemove = null;
                }
            }
        };
    };

//鼠标松开
    _sv_btn.onmouseup = function(event) {
        //事件清除
        this.onmousemove = null;
        //判断验证是否成功
        if (_sv_flag) {
            return
        }
        this.style.left = 0; //设置滑动块的距离
        _sv_bg.style.width = 0; //设置背景的宽度
    };
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

滑动验证（原创）

代码描述：js原生支持移动端PC端

js与css 请保持同一级目录样式表可个性化根据自己意愿更改

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

杭州趟小小

相关代码

滑动验证（原创）

最新