可自定义刻度jQuery进度条

可自定义刻度jQuery进度条是一款可以自定义进度条刻度圆点的数量，大小，颜色等属性，并且可以通过CSS来控制圆点的外观样式。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="htmleaf-container">    <div id="container">      <div class="padded">        <div id="progressHolder"></div>        <div id="progressReset">生成随机的风格</div>      </div>    </div>  </div>  <script src='/images/loading.gif' data-original="js/jquery-2.1.1.min.js" type="text/javascript"></script>  <script src='/images/loading.gif' data-original="js/jquery.progressdots.js"></script>  <script src='/images/loading.gif' data-original="js/prism.js"></script>  <script>    $(document).ready(function () {      createSpots(1);      $("#progressReset").click(function (event) {        event.preventDefault();        createSpots(1);      });      function createSpots(num) {        for (var i = 0; i < num; i++) {          options = {            dotSize: random(10, 20) + "px",            radius: random(1, 7) * 10 + "%"          };          randomHtml = "";          if (Math.random() < 0.5) {            options.randomColors = true;            randomHtml += "\n\trandomColors: " + options.randomColors + ", //use random colors";          }          else {            options.dotColor = randomColor();            randomHtml += "\n\tdotColor: '" + options.dotColor + "', //set dot color (#HEX)";          }          if (Math.random() < 0.3) {            options.progress = true;            options.percent = random(5, 100);            randomHtml += "\n\tprogress: true, //enable progress";            randomHtml += "\n\tpercent: " + options.percent + ", //set initial percentage";          } else {            options.numDots = random(3, 15);            randomHtml += "\n\tnumDots: " + options.numDots + ", //number of dots";          }          string = "$( '#progressBox' ).dottify({\            \n\tdotSize: '" + options.dotSize + "', //set size of dot" +              randomHtml +              "\n\tradius: '" + options.radius + "' //set dot corner radius\        \n});";          var $container = $("<div class='swoopContainer'></div>").data("setupString", JSON.stringify(string));          $("#progressHolder").append($container.hide());          $container.slideDown(function () {            $(this).css({ overflow: "hidden" });          });          $container.click(function () {            $(".swoopContainer").removeClass("selected");            $(this).addClass("selected");            $("#jsContents").html(JSON.parse($(this).data("setupString")));            Prism.highlightAll();          });          $container.dottify(options);          $("#jsContents").html(string);          Prism.highlightAll();        }        $(".swoopContainer").removeClass("selected");        $(".swoopContainer").last().addClass("selected");      }      function randomColor() {        return '#' + Math.floor(Math.random() * 16777215).toString(16);      }      function random(min, max) {        return Math.floor(Math.random() * ((max - min) + min) + min);      }    });  </script>

via：http://www.w2bc.com/article/60080

原标题：可自定义刻度jQuery进度条

关键词：jquery