jquery實(shí)現(xiàn)加載進(jìn)度條提示效果

更新時(shí)間：2015年11月23日 10:41:35 作者：xiao-jian

這篇文章主要介紹了jquery實(shí)現(xiàn)加載進(jìn)度條提示效果，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了jquery實(shí)現(xiàn)加載進(jìn)度條提示效果代碼。分享給大家供大家參考。具體如下：
運(yùn)行效果截圖如下：

具體代碼如下：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title>進(jìn)度條</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++) {
   //對每個(gè)元素的位置和透明度進(jìn)行初始化設(shè)置
   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}

希望本文所述對大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery性能優(yōu)化的38個(gè)建議
想必大家對于jQuery這個(gè)最流行的javascript類庫都不陌生，而且只要是前端開發(fā)人員肯定或多或少的使用或者接觸過，在這篇文章中，參考了一些資料及實(shí)際使用效率，將介紹一些書寫高質(zhì)量jQuery代碼的原則，不單單會告訴你如何去書寫，也會告訴你為什么這樣書寫，希望大家會覺得有所幫助
2014-03-03
JQuery的一些小應(yīng)用收集
JQuery框架沒有的可以在網(wǎng)上Down。
2010-03-03
jQuery插件jqGrid動態(tài)獲取列和列字段的方法
這篇文章主要介紹了jQuery插件jqGrid動態(tài)獲取列和列字段的方法,結(jié)合實(shí)例形式分析了表格插件jqGrid針對表格字段屬性相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03
JQ獲取動態(tài)加載的圖片大小的正確方法分享
這篇文章介紹了JQ獲取動態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下
2013-11-11
基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
這篇文章主要介紹了基于jQuery的select下拉框選擇觸發(fā)事件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了常用瀏覽器對select觸發(fā)事件的兼容及實(shí)現(xiàn)觸發(fā)的相關(guān)技巧,需要的朋友可以參考下
2016-11-11
jquery 事件冒泡的介紹以及如何阻止事件冒泡
在一個(gè)對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會向這個(gè)對象的父級對象傳播，從里到外，直至它被處理,挺起來感覺這么不可思議，接下來為大家解除疑惑
2012-12-12
jQuery解析json格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù),涉及jQuery針對json格式數(shù)據(jù)元素遍歷相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09
JQuery中關(guān)于jquery.js與jquery.min.js的比較探討
jquery-1.4.2.min.js是優(yōu)化的，而query-1.4.2.js是易于開發(fā)著閱讀的，具體詳解祥看本文，希望對你有所幫助
2013-05-05
jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動的正方形效果,可實(shí)現(xiàn)圖片組集體轉(zhuǎn)動的功能,通過jQuery結(jié)合時(shí)間函數(shù)定時(shí)操作css3屬性實(shí)現(xiàn)旋轉(zhuǎn)效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下
2016-01-01
jQuery獲取節(jié)點(diǎn)和子節(jié)點(diǎn)文本的方法
本節(jié)主要介紹了jQuery如何獲取節(jié)點(diǎn)和子節(jié)點(diǎn)文本，下面有個(gè)示例，大家可以參考下
2014-07-07