WEB前端开发滑块验证demo示例

前端制定开发文档
前端开发文档的书写
web前端 开发文档

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>滑动验证demo</title>
        <script src=”http://code.jquery.com/jquery-latest.js”></script>
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .demo {
            width: 300px;
            height: 300px;
            background: #dddddd;
            margin: 100px auto;
        }
        .main {
            position: relative;
            width: 300px;
            height: 260px;
            background: #ff3344;
        }
        .end,
        .start {
            position: absolute;
            width: 40px;
            height: 40px;
        }
        .end {
            left: 200px;
            top: 100px;
            background: #111111;
        }
        .start {
            left: 0;
            top: 100px;
            background: #666666;
        }
        .move {
            position: relative;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background: #333333;
            cursor: pointer;
        }
    </style>
    <body>
        <div class=”demo”>
            <div class=”main”>
                <div class=”end”></div>
                <div class=”start”></div>
            </div>
            <div class=”move”></div>
        </div>
        <script>
            $(function() {
                var movedrag = function() {
                    var oleft = $(‘.move’).offset().left
                    var mleft = 0
                    $(‘.move’).mousedown(function(e) {
                        var dis = e.pageX – oleft
                        $(‘html’).mousemove(function(e) {
                            e.preventDefault()
                            mleft = e.pageX – oleft – dis
                            if (mleft > 0 && mleft < 260) {
                                $(‘.move’).css(‘left’, mleft)
                                $(‘.start’).css(‘left’, mleft)
                            } else if (mleft > 260) {
                                $(‘.move’).css(‘left’, ‘260px’)
                                $(‘.start’).css(‘left’, ‘260px’)
                            } else {
                                $(‘.move’).css(‘left’, 0)
                                $(‘.start’).css(‘left’, 0)
                            }
                        })
                        $(‘html’).mouseup(function() {
                            $(‘html’).unbind()
                            $(‘.move’).unbind()
                            var oo = parseInt($(‘.start’).css(‘left’)) – 200 //设置结合点差距
                            if (oo < 2 && oo > -2) {
                                alert(‘重合’)
                            } else {
                                alert(‘错误’)
                                $(‘.move’).css(‘left’, 0)
                                $(‘.start’).css(‘left’, 0)
                                movedrag()
                            }
                        })
                    })
                }
                movedrag()
            })
        </script>
    </body>
</html>
web前端开发需求文档
前端开发功能文档
web前端开发开源文档
» 本文来自:前端开发者 » 《WEB前端开发滑块验证demo示例》
» 本文链接地址:https://www.rokub.com/6749.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!