jquery实现加载进度条提示效果

2019-11-20 11:12:23

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

css样式：

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() {

js代码：

var total = 16,   angle = 3 * Math.PI,   Radius = 80,   html = '';  var spinnerL = parseInt($("div.spinner").css("margin-left"));  var spinnerT = parseInt($("div.spinner").css("margin-top"));  for (var i = 0; i < total; i++) {   //对每个元素的位置和透明度进行初始化设置   var loaderL = Radius + Radius * Math.sin(angle) - 10;   var loaderT = Radius + Radius * Math.cos(angle) - 10;   html += "<div class='loaderdot' style='left:" + loaderL + "px;top:" + loaderT + "px; opacity:" + i / (total - 1) + "'></div>";   angle -= 2 * Math.PI / total; } $("div.spinner").empty().html(html); var lastLoaderdot = $("div.loaderdot").last(); timer = setInterval(function() {   $("div.loaderdot").each(function() {   　　var self = $(this);   　　 var prev = self.prev().get(0) ? self.prev() : lastLoaderdot,    　　 opas = prev.css("opacity");   　　 self.animate({    　　opacity: opas   　　}, 50);   }); }, 60);27}

希望本文所述对大家学习jquery程序设计有所帮助。

上一篇：nodejs初步体验篇

下一篇：Nodejs初级阶段之express