zoukankan      html  css  js  c++  java
  • JS实现转动效果

    方案一

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

    CSS样式

    @keyframes scroll
    {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
    }

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

    .div_uploading_scroll
    {
    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
    {
    113px;
    height: 113px;
    background: url(../../image/book/uploading2.png);
    position: absolute;
    border-radius: 113px;
    top: 35px;
    left: 35px;
    }

    方案二

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

    CSS

    .uploadimg
    {
    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);
    }

  • 相关阅读:
    台州 OJ 3847 Mowing the Lawn 线性DP 单调队列
    洛谷 OJ P1417 烹调方案 01背包
    快速幂取模
    台州 OJ 2649 More is better 并查集
    UVa 1640
    UVa 11971
    UVa 10900
    UVa 11346
    UVa 10288
    UVa 1639
  • 原文地址:https://www.cnblogs.com/vofill/p/5610191.html
Copyright © 2011-2022 走看看