Rumah > hujung hadapan web > tutorial js > jquery melaksanakan pemuatan bar kemajuan gesaan effect_jquery

jquery melaksanakan pemuatan bar kemajuan gesaan effect_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:30:33
asal
1940 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod jquery untuk melaksanakan kesan gesaan bar kemajuan pemuatan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

gaya 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() {
Salin selepas log masuk

kod 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) &#63; self.prev() : lastLoaderdot,
       opas = prev.css("opacity");
      self.animate({
      opacity: opas
     }, 50);
   });
 }, 60);
27}
Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan jquery.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan