找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发分段式进度条 v2.0 (jQuery 控制 CSS3动画 )

2018-12-24 分类：JavaScript 阅读(1215) 评论(0)
微信前端界面开发
微信小程序与前端开发的区别
微信小程序群功能开发-前端篇

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>Staged progress bar v2.0</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            .cf:after {
                content: ”;
                display: block;
                clear: both;
                height: 0;
            }
            #bar,
            #bar .staged {
                border: solid 2px #666;
            }
            #bar .staged,
            #bar .progress {
                float: left;
                background: #bbb;
            }
            #bar {
                margin: 120px 40px 80px 80px;
                width: 768px;
                background: #bbb;
            }
            #bar,
            #bar .progress,
            #bar .pBar {
                height: 20px;
                border-radius: 20px;
            }
            #bar .staged,
            #bar .sBar,
            #bar .progress:after {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            #bar .staged {
                position: static;
                margin: -16px;
            }
            #bar .staged:first-child {
                margin-left: -38px;
            }
            #bar .staged:after {
                content: attr(data-text);
                display: block;
                text-align: center;
                margin-top: calc(100% + 10px);
            }
            #bar .progress {
                width: 120px;
                padding-right: 20px;
                position: relative;
                z-index: 2;
            }
            #bar .progress:last-child {
                width: 80px;
            }
            #bar .progress:after {
                top: -15px;
                content: attr(data-value);
                display: block;
                text-align: center;
                line-height: 50px;
                color: #fff;
            }
            #bar .sBar,
            #bar .pBar {
                background: dodgerblue;
            }
            #bar .sBar,
            #bar .progress:after {
                position: absolute;
                margin-left: -36px;
            }
            #bar .sBar {
                width: 20px;
                height: 20px;
                margin-left: -42px;
                transform-origin: -4px 9.5px;
                visibility: hidden;
            }
            #bar .pBar {
                position: relative;
                padding: 0 10px;
                width: 0;
                visibility: hidden;
            }
            #bar .sBarScale {
                visibility: visible;
                transform: scale(2.5);
                transition: all 0.6s 1.8s;
            }
            #bar .pBarShow {
                visibility: visible;
                transition: all 2s 0.2s;
            }
            .msg:before,
            .msg:after {
                display: block;
                position: absolute;
                border-style: solid;
                border-color: #ccc;
                background: #fff;
                top: 30px;
            }
            .msg:before {
                content: attr(data-text);
                width: 180px;
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
                border-width: 1px;
                top: -68px;
                left: calc(100% – 100px);
            }
            .msg:after {
                content: ”;
                width: 14px;
                height: 14px;
                transform: rotate(45deg);
                border-width: 0 1px 1px 0;
                top: -34px;
                left: calc(100% – 16px);
            }
        </style>
        <script
            type=”text/javascript”
            src=”http://code.jquery.com/jquery-1.12.3.js”
        ></script>
    </head>
    <body>
        <div id=”bar” class=”cf” data-value=”8000″>
            <div class=”staged” data-text=”小白”></div>
            <div class=”progress” data-value=”0″>
                <div class=”sBar sBarScale”></div>
                <div class=”pBar”></div>
            </div>
            <div class=”staged” data-text=”菜鸟”></div>
            <div class=”progress” data-value=”200″>
                <div class=”sBar” data-css=””></div>
                <div class=”pBar” data-css=”width:100%”></div>
            </div>
            <div class=”staged” data-text=”小鸟”></div>
            <div class=”progress” data-value=”1000″>
                <div class=”sBar”></div>
                <div class=”pBar”></div>
            </div>
            <div class=”staged” data-text=”老鸟”></div>
            <div class=”progress” data-value=”5000″>
                <div class=”sBar”></div>
                <div class=”pBar”></div>
            </div>
            <div class=”staged” data-text=”大神”></div>
            <div class=”progress” data-value=”10000″>
                <div class=”sBar”></div>
                <div class=”pBar”></div>
            </div>
        </div>
        <script type=”text/javascript”>
            $(function() {
                //操作 className 控制 css transition 动画。
                var stagedProgressBar = function(o, n) {
                    if ($.type(o) != ‘object’) return
                    o.value = Number(o.value)
                    var setMsg = function(obj, n) {
                        t = setTimeout(function() {
                            obj.attr(
                                ‘data-text’,
                                o.msgText.replace(o.msgNote, n),
                            ).addClass(o.msg)
                            clearTimeout(t)
                        }, o.sleep * 0.8)
                    }
                    var run = function() {
                        var obj = $(o.pBar).eq(index),
                            w = 0,
                            to =
                                index + 1 >= o.values.length
                                    ? o.value * 2 – Number(o.values[index]) + 1
                                    : Number(o.values[index + 1])
                        w =
                            o.value < to
                                ? Math.round(
                                        ((o.value – Number(o.values[index])) /
                                            (to – Number(o.values[index]))) *
                                            10000,
                                 ) * 0.01
                                : 100
                        if (w == 0) return
                        var v = to – o.value
                        var ww = w < 100 ? w – (8 / w) * 100 : w
                        obj.css(‘width’, ww + ‘%’).addClass(o.pClass)
                        if (w < 100 && index + 1 < o.values.length) {
                            setMsg(obj, v)
                            return
                        }
                        index++
                        if (index >= o.values.length) return
                        $(o.sBar)
                            .eq(index)
                            .addClass(o.sClass)
                        clearTimeout(t)
                        t = setTimeout(run, o.sleep)
                    }
                    var index = 0,
                        t = 0
                    run()
                }
                var arr = []
                $(‘.progress’).each(function(i, o) {
                    arr[i] = $(o).attr(‘data-value’)
                })
                stagedProgressBar({
                    value: $(‘#bar’).attr(‘data-value’),
                    values: arr,
                    sBar: $(‘.sBar’),
                    pBar: $(‘.pBar’),
                    sClass: ‘sBarScale’,
                    pClass: ‘pBarShow’,
                    sleep: 2200,
                    msg: ‘msg’,
                    msgText: ‘还差 0 点经验升级！’,
                    msgNote: ‘0’,
                })
            })
        </script>
    </body>
</html>
web前端微信开发
微信h5开发前端
前端开发 扫一扫微信支付
赞(0)
前端开发者 » 前端开发分段式进度条 v2.0 (jQuery 控制 CSS3动画 )
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论