【案例】如何用js实现加载上升的loading效果（内附代码）
【案例】如何用js实现加载上升的loading效果（内附代码）
用户1730674
发布于 2018-12-27 10:42:38
发布于 2018-12-27 10:42:38
如何写出js水平线上升加载效果
前期准备:需要一张水平线荡漾图片,格式为png或svg
代码实现如下：
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(e) {
var n=0,t=100,num=0
function toleft(){
if(n>-200){
$(".circle img").css({left:n--})
}else{n=0}
}
var tleft=setInterval(toleft,3)
function totop(){
if(t>0){
$(".circle img").css({top:t--})
}else{t=100}
}
var ttop=setInterval(totop,100)
function numup(){
if(num<100){
num++
}else{
num=0
}
$(".circle span").html(num+"%")
}
var tnum=setInterval(numup,100)
});
</script>
<style>
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;}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="circle">
<img src="water.svg">
<span></span>
</div>
</body>
</html>实践是检验真理的唯一标准
那就利用中午时间试试吧
最后衷心祝愿
同学们学习工作都顺利！
还想了解哪些知识都可以留言给我
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录