极简动态水球进度控件,水球水位根据设置的进度百分比呈现动态效果。
./libs/waterlevel.js
添加css
<style>
.mo_waterLevel {
width: 80%;
height: 200px;
text-align:center;
margin:0 auto
}
</style>
引用js文件
<script type="text/javascript" src="libs/mo_waterLevel.js"></script>
添加控件html代码
<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"。