转换为语音并朗读全文 00:00 / 00:00

20130620161604

这个特效叫“圆圈加载”,需要加载jQuery。

首先我们在header.php中引入jQuery库

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.min.js">\x3C/script>')</script>

这里我使用的是百度cdn的1.7.2版本的jQuery库,其他jQuery库:

谷歌:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
新浪:<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
微软:<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
又拍云:<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.7.2.min.js"></script>

然后在footer.php</body>标签前加上:

<div id="circle"></div>
<div id="circletext"></div>
<div id="circle1"></div>

<script type="text/javascript">
jQuery(document).ready(function(){
$("#circletext").text("加载肿");
$(window).load(function() {
$("#circle").fadeOut(400);
$("#circle1").fadeOut(600);
$("#circletext").text("完成鸟").fadeOut(800);
});
});
</script>

也可以将上面这段js直接写入您的js文件里。

最后在style.css里加入:

/* 圆圈加载*/
#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}
#circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}
#circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}

如果你不喜欢中间那段文字,请删掉:

<div id="circletext"></div>
$("#circletext").text("加载肿");
$("#circletext").text("完成鸟").fadeOut(800);
#circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}
效果见本站左下角~如需其他的加载中特效,请自行谷歌之~

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

带符号 * 的表示必填项
  1. 尼伯龙根指环
    尼伯龙根指环

    博主你好,我使用时出现这样的问题,就是加载后出现了圆圈和文字,但是加载完毕后圆圈不消失,我不太清楚是怎么回事,可以帮我看看吗?

    回复
  2. 赵温阳
    赵温阳

    看看怎么样

    回复
  3. xcai
    xcai

    我还是不知道弄,恳请博主帮帮忙,http://pan.baidu.com/share/link?shareid=158913451&;uk=589604010
    Uu主题中hcms.php是foot文件,以解密但我并没有去除版权,详情可以查看我的主页。
    再一次恳求博主等帮下我,谢谢。

    回复
  4. 往事随风
    往事随风

    :o 看不太懂= =它是怎么判断网页是否加载完成的呢。。。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @往事随风 $(window).load

      回复
  5. 正仔
    正仔

    喜欢你这个效果O(∩_∩)O~~

    回复
  6. 麦田一根葱
    麦田一根葱博主

    @ISOFTEE.COM 贵站的加载的JS实在太多了。。。。。。。。。 :o 30个。。。

    回复
  7. ISOFTEE.COM
    ISOFTEE.COM

    我的没有字体啊

    回复
    1. 麦田一根葱
      麦田一根葱博主

      你没加字体 所以没有

      回复
      1. ISOFTEE.COM
        ISOFTEE.COM

        有没有什么办法压缩呢

        回复
        1. 麦田一根葱
          麦田一根葱博主

          搜一下:JS压缩

          回复
          1. ISOFTEE.COM
            ISOFTEE.COM

            @麦田一根葱

            jQuery(document).ready(function(){
            $("#circletext").text("加载肿");
            $(window).load(function() {
            $("#circle").fadeOut(400);
            $("#circle1").fadeOut(600);
            $("#circletext").text("完成鸟").fadeOut(800);
            });
            });

            回复
            1. 麦田一根葱
              麦田一根葱博主

              O_O"不明觉厉

              回复
      2. ISOFTEE.COM
        ISOFTEE.COM

        我用的是谷歌的额,1.83

        回复
        1. 麦田一根葱
          麦田一根葱博主

          @ISOFTEE.COM 你把JS放head里看看

          回复
          1. 麦田一根葱
            麦田一根葱博主

            @麦田一根葱 JS有冲突。。。。 :sad:

            回复
      3. ISOFTEE.COM
        ISOFTEE.COM

        @麦田一根葱 我加上了好像停不下来, 使用的库是

        回复
        1. 麦田一根葱
          麦田一根葱博主

          @ISOFTEE.COM JQ库啊 文中有说明

          回复
  8. tiandi
    tiandi

    这效果看到好多次了,不过在底部的话不如在顶部来得效果好点。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      这个,个人喜好吧

      回复