집 > 기사 > 웹 프론트엔드 > jquery는 로딩 진행률 표시줄 프롬프트를 구현합니다. effect_jquery

jquery는 로딩 진행률 표시줄 프롬프트를 구현합니다. effect_jquery

WBOY원래의: 2016-05-16 15:30:331879검색

이 문서의 예에서는 로딩 진행률 표시줄 프롬프트 효과를 구현하는 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) &#63; self.prev() : lastLoaderdot,
    　　 opas = prev.css("opacity");
   　　 self.animate({
    　　opacity: opas
   　　}, 50);
   });
 }, 60);
27}

이 기사가 jquery 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：js는 폼의 값을 받아 폼 뒤에 값을 철자하는 방법을 구현합니다. action_javascript 기술다음 기사：js는 폼의 값을 받아 폼 뒤에 값을 철자하는 방법을 구현합니다. action_javascript 기술

jquery는 로딩 진행률 표시줄 프롬프트를 구현합니다. effect_jquery

관련 기사