jquery实现兼容手机端移动端的滑块拖动验证效果代码-html代码-BFW代码库

jquery实现兼容手机端移动端的滑块拖动验证效果代码

代码语言：html

所属分类：验证

代码描述：jquery实现兼容手机端移动端的滑块拖动验证效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <title>滑动解锁验证</title>
    <style>
    body{
        padding: 100px 30px;
    }
        #slide_box {
            width: 70%;
            height: 42px;
            text-align: center;
            line-height: 42px;
            font-size: 14px;
            color: #717171;
            background-color: #e8e8e8;
            border: none;
            margin-bottom: 20px;
    		border-radius:42px;
        }

        #slide_xbox {
            width: 50px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            font-size: 16px;
            color: #fff;
            position: absolute;
            background: #35b34a;
            border-radius: 44px 43px 43px 43px;
        }

        #btn {
            cursor: pointer;
            width: 50px;
            height: 42px;
            float: right;
            -webkit-box-shadow: 0px 0px 15px 0px #ddd;
            -moz-box-shadow: 0px 0px 15px 0px #ddd;
            box-shadow: 0px 0px 15px 0px #ddd;
            color: #8a8c97;
            background:#fff url(//repo.bfw.wiki/bfwrepo/image/60dec057ce3eb.png) 0 0 no-repeat;
            background-size: 100% 100%;
            border-radius: 100%;
            
        }

        #btn > .iconfont {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="slide_box">
    <div id="slide_xbox">
        <div id="btn">
        </div>
    </div>
    请按住滑块，拖动到最右边
<script type="text/javascript">
	var locked;
    window.onload = function () {
        slide();
     
    }
    window.onresize = function () {
        if(locked==true){
            var boxWidth = $('#slide_box').width();
            $('#slide_xbox').width(boxWidth);
        }else{
            slide();
        }
    }
		  //滑动解锁移动
    function slide() {
        var slideBox = $('#slide_box')[0];
        var slideXbox = $('#slide_xbox')[0];
        var btn = $('#btn')[0];
        var slideBoxWidth = slideBox.offsetWidth;
        var btnWidth = btn.offsetWidth;
        //pc端
        btn.ondragstart = function () {
            return false;
            
            
        };
        btn.onselectstart = function () {
            return false;
        };
        btn.onmousedown = function (e) {
            var disX = e.clientX - btn.offsetLeft;
            document.onmousemove = function (e) {
                v.........完整代码请登录后点击上方下载按钮下载查看