用jquery制作加载条 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>进度条</title>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js"></script>
    </head>

    <body>
        <div class="spinner"> </div>  
    </body>

</html>
body,div {
    padding: 0;
    margin: 0;
}
div.spinner {
    position: absolute;
    width: 160px;
    height: 160px;
    margin-left: 240px;
    margin-top: 350px;
}
div.loaderdot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(29, 140, 248);
}     1 window.onload = function() {
 2      var total = 16,
 3          angle = 3 * Math.PI,
 4          Radius = 80,
 5          html = '';
 6      var spinnerL = parseInt($("div.spinner").css("margin-left"));
 7      var spinnerT = parseInt($("div.spinner").css("margin-top"));
 8      for (var i = 0; i < total; i++) {
 9           //对每个元素的位置和透明度进行初始化设置
10           var loaderL = Radius + Radius * Math.sin(angle) - 10;
11           var loaderT = Radius + Radius * Math.cos(angle) - 10;
12           html += "<div class='loaderdot' style='left:" + loaderL + "px;top:" + loaderT + "px; opacity:" + i / (total - 1) + "'></div>";
13           angle -= 2 * Math.PI / total;
14     }
15     $("div.spinner").empty().html(html);
16     var lastLoaderdot = $("div.loaderdot").last();

17     timer = setInterval(function() {
18           $("div.loaderdot").each(function() {
19           　　var self = $(this);
20          　　 var prev = self.prev().get(0) ? self.prev() : lastLoaderdot,
21              　　 opas = prev.css("opacity");
22          　　 self.animate({
23               　　opacity: opas
24           　　}, 50);
25           });
26     }, 60);
27}

运行结果:http://landingpage.hdtmedia.com//learning/20150612/loading.html

 

posted @ 2015-06-12 14:16  xiao-jian  阅读(798)  评论(0)    收藏  举报