dragdealer实现滑动拖动解锁显示数字等效果代码-html代码-BFW代码库

dragdealer实现滑动拖动解锁显示数字等效果代码

代码语言：html

所属分类：拖放

代码描述：dragdealer实现滑动拖动解锁显示数字等效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["dragdealer", "dragdealer"], function() {
                new Dragdealer('demo-simple-slider');

                new Dragdealer('just-a-slider', {
                    animationCallback: function(x, y) {
                        $('#just-a-slider .value').text(Math.round(x * 100));
                    }
                });
                new Dragdealer('slide-to-unlock-new', {
                    x: 1,
                    steps: 2,
                    loose: true,
                    callback: function(x, y) {
                        // Only 0 and 1 are the possible values because of "steps: 2"
                        if (!x) {
                            this.disable();
                            $('#slide-to-unlock-new').fadeOut();
                        }
                    }
                });
                new Dragdealer('slide-to-unlock-old',
                    {
                        steps: 2,
                        callback: function(x, y) {
                            // Only 0 and 1 are the possible values because of "steps: 2"
                            if (x) {
                                this.disable();
                                $('#slide-to-unlock-old').fadeOut();
                            }
                        }
                    });
            });
        });
    </script>
    <style>
    body{
        padding: 40px;
    }
        .hei {
            height: 20px;
        }
        .demo .dragdealer {
            background: #e1e1e1;
            height: 40px;
            border-radius: 3px;
        }
        .demo .dragdealer .red-bar {
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            border-radius: 3px;
        }

        /* Just a slider */

        #just-a-slider {
            height: 60px;
        }
        #just-a-slider .handle {
            height: 60px;
            line-height: 60px;
        }
        #just-a-slider .value {
            padding: 0 0 0 5px;
            font-size: 30px;
            font-weight: bold;
        }

        /* Content slider */

        .content-scroller .dragdealer {
            float: right;
            width: 40px;
            height: 300px;
        }
        .content-scroller .dragdealer .handle {
            width: 40px;
            height: 60px;
            text-align: center;
        }
        .content-scroller .dragdealer .handle i {
            line-height: 60px;
        }
        .content-scroller .content-mask {
            height: 298px;
            margin: 0 55px 0 0;
            border: 1px solid #ccc;
            border-radius: 3px;
            overflow: hidden;
        }
        .content-scroller .content-body {
            /* Incorporate the margins of the paragraphs inside */
            overflow: hidden;
            background: #fff;
        }
        .content-scroller .content-body p {
            margin: 15px;
            color: #333;
            font-family: monospace;
            line-height: 24px;
        }

        /* Slide to unlock */

        .slide-to-unlock {
            position: relative;
            width: 400px;
            height: 80px;
        }
        .slide-to-unlock .dragdealer {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            .........完整代码请登录后点击上方下载按钮下载查看