JS实现转动效果

Posted 2020-07-28 vofill-work

方案一

<div class="div_uploading">
<div class="div_uploading_scroll"></div>
<div class="div_uploading_content"></div>
</div>

 

CSS样式

.div_uploading
{
width:150px;
height:150px;
z-index:10001;
position:absolute;
top:40%;
left:40%;
}

.div_uploading_scroll
{
width:185px;
height:185px;
background:url(../../image/book/uploading1.png);
position: absolute;
border-radius: 185px;
left: 0;
top: 0;
animation:scroll 2s infinite linear;
}

.div_uploading_content
{
width: 113px;
height: 113px;
background: url(../../image/book/uploading2.png);
position: absolute;
border-radius: 113px;
top: 35px;
left: 35px;
}

 

 

方案二

<div class="uploadimg">
上传中...
</div>

CSS

.uploadimg
{
width:120px;
height:120px;
background:url(../../image/book/uploading3.png);
position:absolute;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-95px;
text-align:center;
line-height:120px;
color:#fff;
display:none;
z-index:10001;
}

 

JS

var index;
function uoloading() {
index = 0;
this.st = window.setInterval(function(){
var x = index%6;
var y = parseInt(index/6)
$(".uploadimg").css({"background-position":-x*120+"px "+ -y*120+"px"});
index ++;
index = index==36 ? 0 : index;
},80);
}