waterLevel

功能描述

极简动态水球进度控件,水球水位根据设置的进度百分比呈现动态效果。

依赖的模块

./libs/waterlevel.js

快速使用

添加css

  1. <style>
  2. .mo_waterLevel {
  3. width: 80%;
  4. height: 200px;
  5. text-align:center;
  6. margin:0 auto
  7. }
  8. </style>

引用js文件

  1. <script type="text/javascript" src="libs/mo_waterLevel.js"></script>

添加控件html代码

  1. <div class="mo_waterLevel" style="width:70%;"></div>

初始化并显示进度效果,0.1=10% mo_waterLevel_init(0.1);

间隔1秒增加控件进度1% setInterval(function () { lev = lev + 0.01 mo_waterLevel_init(lev); }, 1000);

特别说明

使用控件时不要改变 class=”mo_waterLevel”。