javascript 拖动滑块验证效果实现

作者: 何必自找失落_ | 来源:发表于2016-12-09 11:50 被阅读0次

javascript 拖动滑块验证效果实现
jquery拖动滑块验证
iOS开发拓展篇—音频处理（音乐播放器5）
Axure交互：拖动滑块验证效果
Python+Selenium 拖动滑块（一）
原生js实现拖动滑块验证
原生js实现拖动滑块验证
js 拖动滑块验证
Swift - RxSwift的使用详解26（UI控件扩展6：U
【Axure交互教程】拖动滑块确定评分区间效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动滑块验证</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        #demo{
            height: 30px;
            width: 260px;
            color: #000;
            margin: 20px auto;
            font-size: 14px;
            border: 1px solid #ccc;
            line-height: 30px;
            position: relative;
        }
        #bar,#ban,p{
            position: absolute;
            left: 0px;
            top: 0px;
        }
        p{
            height: 30px;
            width: 260px;
            text-align: center;
        }
        #bar{
            width: 40px;
            height: 30px;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            left: -1px;
            text-align: center;
            cursor: pointer;
        }
        #ban{
            height: 30px;
            background-color: #7ac23c;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div id="ban">
        </div>
        <p>拖动滑块验证</p>
        <div id="bar">
            >>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function (){
            var ban = document.getElementById("ban");
            var bar = document.getElementById('bar');
            isMove = false;//是否可以移动 默认值false 当滑块点击就可以移动了
            var oldX = 0;// 鼠标的初始位置
            var isTrue = false //是否移动成功
            bar.onmousedown = function (event){
                var event = event || window.event;
                oldX = event.clientX;
                isMove = true;// 按下之后可以滑动了
                return false;
            }
            bar.onmouseout = bar.onmouseup = function (){
                isMove = false;
                // 如果 失败就会回到初始位置
                if (!isTrue) {
                    goMoren();
                }
                return false;
            }
            function goMoren(){
                var timer = setInterval(function (){
                    var speed = (bar.offsetLeft - (-1))/5;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    bar.style.left = ban.style.width = bar.offsetLeft - speed + "px";
                    if (bar.offsetLeft == -1) {
                        clearInterval(timer);
                    }
                },30)
            }
            document.onmousemove = function (event){
                var event = event || window.event;
                // 鼠标在窗口中滑动 且isMove 为true 确认滑动
                if (isMove) {
                    var dirX =  event.clientX - oldX;
                    console.log(dirX);
                    bar.style.left = bar.offsetLeft + dirX + 'px';
                    //越界处理
                    if (bar.offsetLeft <= -1) {
                        bar.style.left = '-1px';
                    }
                    if (bar.offsetLeft + bar.offsetWidth >= 261) {
                        bar.style.left = 261 - bar.offsetWidth + 'px';
                        bar.innerHTML = "√";
                        bar.style.color = "#7ac23c";
                        isTrue = true;
                    }
                    ban.style.width = bar.offsetLeft + "px";
                    oldX = event.clientX;
                }
                return false;
            }
        }
    </script>
</body>
</html>