ホームページ > 記事 > ウェブフロントエンド > jqueryはロードプログレスバープロンプトeffect_jqueryを実装します
jqueryはロードプログレスバープロンプトeffect_jqueryを実装します
- WBOYオリジナル
- 2016-05-16 15:30:331866ブラウズ
この記事の例では、読み込み進行状況バーのプロンプト効果を実装するための 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 プログラミングを学習するすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。