本文實(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++) { //對(duì)每個(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}希望本文所述對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
