html+js实现手机浏览器的滑动验证

前言

前两天发了一篇关于适用于PC浏览器的滑动验证的文章。这两天修改之后，改为了适用于手机浏览器的滑动验证功能。

---

一、原理

简单介绍一下实现的原理，就是获取一张本地的图片之后，随机截取一个区域，作为需要拖动的图片。这个截取的区域可以通过css样式的设定，设定为拼图的形状等等，我这里为了方便，设置的是一个正方形，随后根据拖动距离进行计算，小于允许误差范围的，即为验证成功。

二、使用步骤

1.需要使用到的js

slider.js：

(function () {
 
    function mobileSlider(params) {
        var object = {
            bImg: params.bImg, //大图片的盒子
            sImg: params.sImg, //图片上的小图片
            sImgOver: params.sImgOver, //图片上的占位区域
            sliderF: params.sliderF, //滑块的父元素
            sliderBtn: params.sliderBtn, //滑块
            sliderBg: params.sliderBg, //滑块滑动过程中的背景块
            refreshBtn: params.refreshBtn, //刷新按钮
            range: params.range, //验证通过的运行范围值
            imgArr: params.imgArr, //图片数组
            refreshCallback: params.refreshCallback, //刷新回调
            callback: params.callback //验证回调函数，true为成功，false为失败
        };
 
        var sliderF = document.getElementById(object.sliderF);
        var sliderBtn = document.getElementById(object.sliderBtn);
        var sliderBg = document.getElementById(object.sliderBg);
        var sImg = document.getElementById(object.sImg);
        var bImg = document.getElementById(object.bImg);
        var sImgOver = document.getElementById(object.sImgOver);
        var refreshBtn = document.getElementById(object.refreshBtn);
        var max_left = sliderF.offsetWidth - sliderBtn.offsetWidth;
        var sImgBeginLeft = 0;
 
 
        function refresh() {
            sliderBtn.style.left = sliderBg.style.width = 0;
            sImgBeginLeft = 0;
            var ram = Math.random();
            var imgIndex = Math.floor(object.imgArr.length * ram);
            var imgSrc = object.imgArr[imgIndex];
            bImg.getElementsByClassName('img')[0].src = sImg.getElementsByClassName('simg')[0].src = imgSrc;
            sImgOver.style.left = Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
            sImg.style.left = sImgBeginLeft = Math.floor((bImg.offsetWidth / 2 - sImgOver.offsetWidth) * ram) + "px";
            sImgOver.style.top = sImg.style.top = Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
            sImg.getElementsByClassName('simg')[0].style.left = -Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
            sImg.getElementsByClassName('simg')[0].style.top = -Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
            object.refreshCallback(true)
        }
        refresh();
 
        sliderBtn.ontouchstart = function (e) {
            var ev = e || window.event
            var downX = ev.touches[0].pageX;
            var sImgLeft = parseInt(sImg.style.left);
            this.ontouchmove = function (e) {
                var ev = e || window.event;
                var leftX = ev.touches[0].pageX - downX;
                leftX = leftX < 0 ? 0 : (leftX < max_left ? leftX : max_left)
                sliderBtn.style.left = leftX + 'px';
                sliderBg.style.width = leftX + sliderBtn.offsetWidth / 2 + "px";
                sImg.style.left = leftX + sImgLeft + "px";
            }
            this.ontouchend = function (e) {
                this.ontouchmove = null; //移除移动事件
                var sImgLeft = parseInt(sImg.style.left);
                var sImgOverLeft = parseInt(sImgOver.style.left);
                if (Math.abs(sImgOverLeft - sImgLeft) < object.range) {
                    object.callback && object.callback(true)
                } else {
                    object.callback && object.callback(false)
                    var timer = null,
                        step = 10;
                    var sliderBtnLeft = parseInt(sliderBtn.style.left)
                    timer = setInterval(function () {
                        sliderBtnLeft -= step;
                        step += 5;
                        if (sliderBtnLeft <= 0) {
                            clearInterval(timer);
                            sliderBtnLeft = 0;
                            sliderBtn.style.left = sliderBg.style.width = 0;
                            sImg.style.left = parseInt(sImgBeginLeft) + "px"
                        }
                        sliderBtn.style.left = sliderBg.style.width = sliderBtnLeft + "px";
                        sImg.style.left = sliderBtnLeft + parseInt(sImgBeginLeft) + "px"
                    }, 20)
 
                }
            }
        };
 
 
 
        refreshBtn.ontouchstart = function () {
            refresh()
        }
 
    }
 
    window.mobileSlider = mobileSlider;
})()



```c

2.html

代码如下（示例）：

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <title>发送邮件进行咨询</title>
    </head>
	<link rel="stylesheet" href="./css/drag.css">
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script src="./js/drag.js"></script>
    <style type="text/css">
        /* Basic Grey */
        .basic-grey {
            margin-left: auto;
            margin-right: auto;
            /* max-width: 500px; */
            max-width: 100%;
            height: 70%;
            background: #F7F7F7;
            padding: 25px 15px 25px 10px;
            font: 12px Georgia, "Times New Roman", Times, serif;
            color: #888;
            text-shadow: 1px 1px 1px #FFF;
            border: 1px solid #E4E4E4;
        }

        .basic-grey h1 {
            font-size: 85px;
            padding: 0px 0px 20px 120px;
            display: block;
            border-bottom: 1px solid #E4E4E4;
            margin: -10px -15px 30px -10px;
            ; color: #888;
        }

        .basic-grey h1>span {
            display: block;
            font-size: 45px;
        }

        .basic-grey label {
            display: block;
            margin: 0px;
            font-size: 45px;
        }

        .basic-grey label>span {
			display:inline-block;
            font-size: 40px;
            float: left;
            width: 50%;
            text-align: left;
			margin-left: 90px;
            padding-right: 10px;
			padding-left: 10px;
            margin-top: 10px;
            color: #888;
        }

        .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
            border: 1px solid #DADADA;
            color: #888;
            height: 60px;
            margin-bottom: 16px;
            margin-right: 5px;
            margin-top: 2px;
			margin-left: 90px;
            outline: 0 none;
            padding: 3px 3px 3px 10px;
            width: 80%;
            font-size: 40px;
            line-height: 42px;
            box-shadow: inset 0px 1px 4px #ECECEC;
            -moz-box-shadow: inset 0px 1px 4px #ECECEC;
            -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
        }

        .basic-grey textarea {
            padding: 5px 3px 3px 5px;
        }

        .basic-grey select {
            background: #FFF url('down-arrow.png') no-repeat right;
            background: #FFF url('down-arrow.png') no-repeat right);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            text-indent: 0.01px;
            text-overflow: '';
            width: 70%;
            height: 35px;
            line-height: 25px;
        }

        .basic-grey textarea {
            height: 100px;
        }

        .basic-grey .button {
			width: 280px;  
			padding:8px;  
			background: #E27575;
			color: #FFF; 
			-moz-border-radius: 10px;  
			-webkit-border-radius: 10px;  
			border-radius: 10px; /* future proofing */  
			-khtml-border-radius: 10px; /* for old Konqueror browsers */  
			text-align: center;  
			vertical-align: middle;  
			border: 1px solid transparent;  
			font-weight: 900;  
			font-size:36px;
			margin-left: -260px;
        }

        .basic-grey .button:hover {
            background: #CF7A7A
        }

		.slidetounlock{
            font-size: 12px;
            background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            -webkit-animation:slidetounlock 3s infinite;
            -webkit-text-size-adjust:none
        }
        @-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}

		.center{
		　　text-align:center;
		}

		/* 拖动css */
		.sliderModel {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
 
        .title {
            width: 100%;
            height: 60px;
            font-size: 38px;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        .cont {
            position: relative;
            background: #fff;
            width: 4800px;
            border-radius: 8px;
            overflow: hidden;
            padding-bottom: 20px;
        }
 
        .imgWrap {
            position: relative;
            width: 700px;
            height: 428px;
            border-radius: 8px;
            margin: 0 auto;
            overflow: hidden;
        }
 
        #sliderRefresh {
            position: absolute;
			font-size: 38px;
            top: 20px;
            right: 30px;
            cursor: pointer;
            color: green;
        }

		#sliderClose {
            position: absolute;
			font-size: 38px;
            top: 20px;
            left: 30px;
            cursor: pointer;
            color: gray;
        }
 
        .img {
            display: block;
            width: 100%;
            height: 100%;
        }
 
        .sliderOver {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: #ddd;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        }
 
        .smartImg {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            overflow: hidden;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
 
        .simg {
            position: absolute;
            display: block;
            width: 700px;
            height: 428px;
        }
 
        .sliderBox {
            width: 700px;
            margin: 10px auto 0;
            height: 72px;
            position: relative;
        }
 
        .sliderF {
            width: 100%;
            height: 100%;
            z-index: 3;
        }
 
        .sliderS {
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            height: 72px;
            width: 72px;
            background: #007cff;
            border-radius: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .icon {
            width: 40px;
            height: 40px;
        }
 
        .bgC {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 60px;
            border-radius: 30px;
            line-height: 60px;
            font-size: 26px;
            color: #999999;
            box-shadow: inset 0 0 4px #ccc;
            text-align: center;
            overflow: hidden;
        }
 
        .bgC_left {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 56px;
            border-top-left-radius: 56px;
            border-bottom-left-radius: 56px;
            line-height: 56px;
            font-size: 38px;
            background-color: #eee;
            box-shadow: inset 0 0 4px #ccc;
            text-align: center;
        }
 
        .showMessage {
            text-align: center;
            font-size: 38px;
			margin-top: 20px;
            height: 90px;
            line-height: 60px;
        }
 
        #closeBtn {
            position: fixed;
            z-index: 10;
            bottom: 10px;
            left: 50%;
        }
    </style>
	<script src="./slider.js"></script>
    <body>
        <form action="" method="post" class="basic-grey">
            <h1>
                咨询函
				<span>请填写以下信息并提交咨询，我们会尽快与您取得联系！</span>
            </h1>
            <label>
                <span>您的联络邮箱 :</span>
				<br/>
                <input id="mailAddress" type="email" name="mailAddress" placeholder="您的联络邮箱"/>
            </label>

            <label>
                <span>防伪识别码 :</span>
				<br/>
                <input id="snno" type="text" name="snno" placeholder="请输入对象产品防伪识别码中的8位编码"/>
            </label>
			<br/>
			<label>
				<span>&nbsp;</span>
				<input type="button" id="sub" class="button" value="提交"/>
			</label>
		</form>
		<div class="sliderModel">
        <div class="cont">
            <div class="title">图形验证</div>
			<div id="sliderClose">关闭</div>
            <div id="sliderRefresh">刷新</div>
            <div class="imgWrap" id="imgWrap">
                <img class="img" src="" />
                <div class="sliderOver" id="sliderOver"></div>
                <div class="smartImg" id="smartImg">
                    <img class="simg" src="" />
                </div>
            </div>
            <div class="sliderBox">
                <div class="sliderF" id="slider">
                    <div class="sliderS" id="sliderBtn">
                        <img class="icon" src="3.png" />
                    </div>
                </div>
                <div class="bgC">
                    &nbsp;&nbsp;&nbsp;拖动左边滑块完成上方拼图
                    <div class="bgC_left" id="bgC_left"></div>
                </div>
            </div>
            <div class="showMessage">
 
            </div>
        </div>
    </div>
    </body>
	<script>
		var object = {
			bImg: 'imgWrap',
			sImg: 'smartImg',
			sImgOver: 'sliderOver',
			sliderF: 'slider',
			sliderBtn: 'sliderBtn',
			sliderBg: 'bgC_left',
			refreshBtn: 'sliderRefresh',
			range: 8,
			imgArr: ['1.jpg', '2.jpg', '3.jpg', '4.jpg',
				'5.jpg'
			],
			refreshCallback: function (e) {
				var showMessage = document.getElementsByClassName('showMessage')[0];
				showMessage.innerHTML = "";
				showMessage.style.color = "#333";
			},
			callback: function (e) {
				var showMessage = document.getElementsByClassName('showMessage')[0];
				if (!e) {
					showMessage.innerHTML = "验证失败，请重新验证";
					showMessage.style.color = "red";
				} else {
					showMessage.innerHTML = "验证成功！";
					showMessage.style.color = "green";
					window.location.href='www.baidu.com';
					alert("提交成功");
					document.getElementsByClassName('sliderModel')[0].style.display = "none";
				}
			},
		}
		var mSlider = null;
		document.getElementById('sub').onclick = function () {
			document.getElementsByClassName('sliderModel')[0].style.display = "flex";
			mSlider = new window.mobileSlider(object)
		}
		document.getElementById('sliderClose').onclick = function () {
			document.getElementsByClassName('sliderModel')[0].style.display = "none";
		}
	</script>
</html>

---

总结

转载请声明出处。
喜欢的话可以点赞、关注支持一下哦~