前端项目开发可拖拽进度条

前端开发项目经理岗位职责|一个前端项目开发流程|一个项目开发的前端包括

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发的项目报告:可拖拽进度条</title>
    <style type=”text/css”>
        .watermarkOpacity_div {
            width: 300px;
            height: 300px;
        }
        .proNum {
            padding-left: 16px;
        }
        .proNum input {
            width: 70px;
            height: 32px;
            font-size: 14px;
            color: #82899b;
            margin: 7px 10px 0 0;
            text-align: center;
            border: 1px solid #d6dae3;
            border-radius: 3px;
        }
        .proNum label {
            color: #6c748a;
            font-size: 16px;
        }
        .watermarkOpacity_progress {
            background: #eaebeb none repeat scroll 0 0;
            border-radius: 100px;
            height: 6px;
            margin: 26px 0 0 16px;
            width: 245px;
        }
        .watermarkOpacity_progress p {
            background: #1589f4 none repeat scroll 0 0;
            border-radius: 100px;
            width: 0;
            height: 100%;
            max-width: 100%;
            min-width: 0;
            position: relative;
        }
        .watermarkOpacity_progress p i {
            background: #fff none repeat scroll 0 0;
            border-radius: 50%;
            box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            height: 13px;
            position: absolute;
            right: -6px;
            top: -4px;
            width: 13px;
            z-index: 2;
        }
        .applicationScope_main label {
            color: #6c748a;
            cursor: pointer;
            font-size: 16px;
            height: 46px;
            line-height: 46px;
            margin-right: 60px;
        }
        .applicationScope_main label input {
            cursor: pointer;
            margin-right: 12px;
        }
    </style>
</head>
<body>
    <div class=”watermarkOpacity_div”>
        <div class=”proNum”>
            <input class=”col-sm-8 form-control” id=”opacity” value=”0″ type=”text”>
            <label class=”perCent”>%</label>
        </div>
        <div class=”watermarkOpacity_progress”>
            <p>
                <i></i>
            </p>
        </div>
    </div>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>
    <script type=”text/javascript”>
        progress();
        //进度条拖拽
        function progress() {
            var pro_w = $(“.watermarkOpacity_progress”).width();
            //初始化
            var per_num = $(“.proNum input”).val();
            var new_pro = pro_w * per_num / 100;
            $(“.watermarkOpacity_progress p”).css({
                “width”: new_pro
            });
            //改变百分比
            $(“.proNum input”).keyup(function () {
                var keyNum = $(this).val();
                var key_pro = keyNum * pro_w / 100;
                $(“.watermarkOpacity_progress p”).css({
                    “width”: key_pro
                });
            })
            var dragging = false;
            var iX, oX;
            $(“.watermarkOpacity_progress i”).mousedown(function (e) {
                dragging = true;
                iX = e.clientX – this.offsetLeft – 6;
                return false;
            })
            $(“.watermarkOpacity_div”).mousemove(function (e) {
                if (dragging) {
                    var e = e || window.event;
                    oX = e.clientX – iX;
                    $(“.watermarkOpacity_progress p”).css({
                        “width”: oX + “px”
                    });
                    var per = oX / pro_w * 100;
                    if (oX <= 0) {
                        $(“.proNum input”).val(“0”);
                    } else if (oX >= pro_w) {
                        $(“.proNum input”).val(“100”);
                    } else {
                        per = Math.round(per);
                        $(“.proNum input”).val(per);
                    }
                    return false;
                }
            })
            $(“body”).mouseup(function (e) {
                dragging = false;
            })
        }
    </script>
</body>
</html>

as开发与前端开发的区别|前端的开发ppt及前景分享|前端开发未来十年前景

» 本文来自:前端开发者 » 《前端项目开发可拖拽进度条》
» 本文链接地址:https://www.rokub.com/4194.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!