用jquery制作加载条

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>进度条</title>    <script type="text/javascript" src='/images/loading.gif' data-original="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: opas24      　　}, 50);25      });26   }, 60);27}

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

原标题：用jquery制作加载条

关键词：jquery

jquery

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： admin#shaoqun.com （#换成@）。

集万物流：https://www.ikjzd.com/w/1573201625226141698
境外通测评管家：https://www.ikjzd.com/w/1573201625926590466
玖州国际：https://www.ikjzd.com/w/1573201633522130946
Kabum：https://www.ikjzd.com/w/1573201645375578114
kachwind：https://www.ikjzd.com/w/1573201646604509186
Kaidee：https://www.ikjzd.com/w/1573201647132991489
黔南瓮安AAA以上旅游景点黔南瓮安aaa以上旅游景点：https://www.vstour.cn/a/408237.html
泰国甲米，曼谷怎么玩？有哪些景点和去处值得：https://www.vstour.cn/a/408238.html