jquery写的一个小进度条

最新推荐文章于 2024-07-29 03:39:25 发布

huntererer

最新推荐文章于 2024-07-29 03:39:25 发布

阅读量1k

点赞数

分类专栏：前端文章标签： html css jquery

本文链接：https://blog.csdn.net/huntererer/article/details/49735059

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前两天在知乎上看到有人问这种进度条的做法，就自己写了写。

百度了才知道设置float后要给子元素设置position为absolute或者relative才能使z-index有效。在css和jquery上都是有收获的。
下面是代码，一开始设置display为fixed是我想提醒一下自己到实际应用中进度条都是fix在浏览器窗口上方的~~~
另外，多次使用!important改变css优先级是不是不推荐的做法呢？改进方案有哪些呢？看来还是有很多东西需要改进。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        #panel *{
            margin: 0;
            padding: 0;
            display: fixed;
        }
        .ball{
            height: 20px;
            width: 20px;
            background-color: gray;
            border-radius: 10px;
            float: left;
        }
        .line{
            margin-top: 6px !important;
            margin-left: -2px !important;
            margin-right: -2px !important;
            height: 8px;
            width: 104px;
            background-color: gray;
            float: left;
        }
        .smallBall{
            margin: 4px !important;
            display: none;
            height: 12px;
            width: 12px;
            border-radius: 6px;
            background-color: green;
        }
        .circle{
            margin: 2.5px !important;
            height: 6px;
            width: 6px;
            border:4px solid green;
            background-color: white;
            display: block;
        }
        .smallLine{
            margin-top: 2px !important;
            margin-left: -6px !important;
            margin-right: -6px !important;
            width: 0;
            height: 4px;
            background-color: green;
            position: absolute;
        }
        </style>
    </head>
    <body>
        <div id="panel">
            <div class="ball"><div class="smallBall circle"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
        </div>

        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
        $(".ball").css("display","block");
        $(".ball").click(function(){
            var $smallBall = $(this).children(".smallBall");
            if($smallBall.hasClass("circle")){
                $smallBall.removeClass("circle");
                $smallBall.css("display","block");
                $(this).next().children(".smallLine").animate({width:"112px"},1000);
                $(this).next().next().children(".smallBall").addClass("circle");
            }
        });
        </script>
    </body>
</html>