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

前端技术 2023/09/04 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10908

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案