加载——水位上移效果

如下代码是一个加载过程的demo，通过水位上移表示进度情况的原理。也就是说，实现了加载过程中，水位上移表示加载的进度值增加的效果。

效果图

1、页面

<div class="circle"><img src="water.png"><span></span></div>

2、css

body{background-color: black;}.circle{left: 50%;margin-left: -100px;background-color: rgba(0%,80%,100%,0.5);width: 200px;height: 200px;border-radius: 50%;overflow: hidden;position: relative;top: 100px;}.circle>img{position: relative;left: 0;top: 100px;}.circle>span{width: 80px;position: absolute;left: 50%;top: 120px;margin-left: -40px;color: rgba(255,255,255,0.5);font-size: 50px;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: center;}

3、js

（1）引入jquery

（2）

$(function() {/* * 描述：图片向左移动，出现水波荡漾的效果 * 实现：定时器，每3ms图片left值减1 *  */var l = 0;function toLeft(){if(l > -200){$(".circle>img").css({left: l--});}else {l = 0;}}setInterval(toLeft, 3);/* * 描述：图片向上移动，出现水位上移的效果 * 实现：定时器，每100ms图片的top-1 *  */var t = 100;function toTop(){if(t > 0){$(".circle>img").css({top: t--})}else {t=100;}}setInterval(toTop, 100);/* * 描述：进度变化，出现随着水位上移进度变化的效果 * 实现：定时器，每100ms，num+1 *  */var num = 0;function numUp(){if(num < 100){num++;}else{num = 0;}$(".circle>span").html(num + "%");}setInterval(numUp, 100);});