ホームページ

JS特殊効果

jQueryの効果

jQuery の弾性スライドアニメーションプログレスバーの特殊効果

ダウンロード中プレビュー

<!doctype html>
<html lang="zh" class="no-js">
<頭>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width、initial-scale=1、maximum-scale=1.0、user-scalable=no">
<title>TweenMax.js jQuery弹性滑動アニメーション画进度条特效</title>

<link rel="stylesheet" type="text/css" href="css/default.css" />

</head>
<body><script src="/demos/googlegg.js"></script>
<div class="コンテナ">
<div class="コンテンツ">
<div class="行">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="ダウンロード" class="ダウンロード" data-progressbar-label="アイテムをダウンロード中..."></div> <br>
</div>
<div class="box">
<pre><コード>
element.ElasticProgress({
ボタンサイズ: 60,
フォントファミリー: "モンセラート",
colorBg: "#adeca8",
colorFg: "#7cc576",
onClick: 関数(イベント) {
console.log("onClick");
$(this).ElasticProgress("open");
},
onOpen: 関数(イベント) {
fakeLoading($(this));
},
onFail: 関数(イベント) {
$(this).ElasticProgress("open");
},
onCancel: 関数(イベント) {
$(this).ElasticProgress("open");
}
});
</code></pre>
</div>
</div>
<div class="行">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="ダウンロード" class="ダウンロード" data-progressbar-label="アイテムをダウンロード中..."></div> <br>
</div>
<div class="box">
<pre><コード>
element.ElasticProgress({
整列: "中央",
フォントファミリー: "Roboto",
colorFg: "#77c2ff",
colorBg: "#4e80dd",
ブリードトップ: 110,
ブリードボトム: 40,
ボタンサイズ: 100,
ラベル傾斜: 70,
arrowDirection: "上",
onClick: function() {
$(this).ElasticProgress("open");
},
onOpen: function() {
fakeLoading($(this))
},
onCancel: function() {
$(this).ElasticProgress("close");
},
onComplete: function() {
var $obj = $(this)
$obj.ElasticProgress("close");
}
});
</code></pre>
</div>
</div>
<div class="行">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="ダウンロード" class="ダウンロード" data-progressbar-label="アイテムをダウンロード中..."></div> <br>
</div>
<div class="box">
<pre><コード>
element.ElasticProgress({
整列: "中央",
colorFg: "#686e85",
colorBg: "#b4bad2",
ハイライトカラー: "#ffab91",
幅: Math.min($(window).width()/2 - 100, 600),
バーの高さ: 10,
ラベルの高さ: 50,
ラベルぐらつき: 0,
ブリードトップ: 120,
ブリードライト: 100,
ボタンサイズ: 60,
フォントファミリー: "Arvo",
バーストレッチ: 0,
バーインセット: 4,
barElasticOvershoot: 1,
barElasticPeriod: 0.6,
textFail: "ダウンロードに失敗しました",
textComplete: "ダウンロード完了",
arrowHangOnFail: false,
onClick: function() {
$(this).ElasticProgress("open");
},
onOpen: function() {
fakeLoading($(this))
},
onComplete: function() {
var $obj = $(this)

TweenMax.layedCall(1.5, function() {
$obj.ElasticProgress("close");
})
}
});
</code></pre>
</div>
</div>
<div class="行">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="ダウンロード" class="ダウンロード" data-progressbar-label="アイテムをダウンロード中..."></div>
</div>
<div class="box">
<pre><コード>
var e = new ElasticProgress(document.querySelectorAll('.Download')[3], {
colorFg: "#ed7499",
カラーBg: "#635c73",
ハイライトカラー: "#ed7499",
バーの高さ: 14,
バーインセット: 10,
fontFamily: "Indie Flower"
});
e.onClick(function() {
e.open();
})
e.onOpen(function() {
fakeLoading(e, 2, 0.5);
});
e.onFail(function() {
e.close();
})
</code></pre>
</div>
</div>
</div>

<スクリプト src="js/jquery.min.js"></script>
<スクリプト src="js/TweenMax.min.js"></script>
<スクリプト src="js/elastic-progress.js"></script>
<スクリプト src="js/main.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</本文>

</html>

jQuery と TweenMax.js プラグインに基づいた、非常に美しい伸縮性のあるスライドアニメーションプログレスバー効果です。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn