現在位置：ホームページ > ダウンロード > JS効果 > jQueryの効果 > jQuery の弾性スライドアニメーションプログレスバーの特殊効果

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

分類する: JS効果 / jQueryの効果	リリース時間: 2017-12-23	訪問: 1102
ダウンロード: 44

クリックしてダウンロードプレビュー効果

詳細>

最新のダウンロード

ファンタジー水族館

『ファンタジーアクアリウム』は、神秘的な海中世界を冒険するファンタジーアドベンチャーゲームです。この想像力豊かな水族館で、プレイヤーは水族館の管理者および専門家の役割を果たします。

0 2024-05-08

『ドールズフロントライン』はSUNBORN Gamesが開発した戦略ロールプレイングゲームです。この未来の世界では、人間とロボット少女が戦います。あなたは指揮官として、ユニークなロボット少女軍団を率いて、スリリングな戦いを繰り広げます。ゲームの特徴: ロボット少女の巨大なキャンプ: さまざまなスタイルや能力を持つロボット少女を集めて訓練し、自分だけの最強のチームを構築します。綿密なプロット設定: ロボット少女たちとコミュニケーションを取り、物語の背景をより深く理解し、戦闘中に彼女たちをサポートし、励まします。精緻な戦闘グラフィック：華麗な戦闘シーンを楽しめる

832 2024-05-06

星の翼

「Star Wings」は、メカガール要素と古典的な GVG 格闘ゲームプレイを完璧に組み合わせた 3D 対戦ゲームです。ゲームでは、プレイヤーは強力な戦闘力を持つメカ少女を操作し、エキサイティングな戦場で1対1、2対2の熾烈な戦いを繰り広げ、他にはない競技の魅力を感じていきます。高精度3Dモデリング技術を採用し、美麗なグラフィックを表現しています。それぞれのメカが個性的で、テクノロジーが詰まったメカ構造や少女の優美な姿が繊細に描かれており、まるで手のひらの上で活躍する超大作アニメのようです。美少女パイロットたちはそれぞれに魅力があり、その個性が声や行動で表れます。

521 2024-05-06

小さな花の妖精フェアリーパラダイス

「小さな花の妖精妖精の楽園」は、子供のような楽しさと魔法に満ちたカジュアルゲームで、大多数のプレイヤーに素晴らしいゲーム体験をもたらします。ゲームでは、あなたは小さな花の妖精の役割を果たし、他のプレイヤーと一緒にエルフの楽園に入り、驚きに満ちた冒険に乗り出します。ゲームの特徴: 新しい魔法の冒険: より精緻なグラフィックで新しいエルフパラダイスの冒険をお楽しみください。絶妙なゲームグラフィックス: このゲームは最新の 3D テクノロジーを使用して美しいゲームグラフィックスを作成し、プレイヤーにまったく新しい視覚的な衝撃を与えます。さまざまなアクティビティ: ゲームでは、プレーヤーはさまざまなアクティビティに参加し、多数のゲーム報酬を獲得できます。リッチ

703 2024-05-06

レストランキュートストーリー

「レストランキュートストーリー」は、かわいいレストラン経営シミュレーションゲームです。このゲームでは、あなたはレストランの若いオーナーとなって、かわいいお客さんたちを迎え入れて、ユニークで賑やかなレストランを作り上げていきます。ゲームの特徴: かわいい動物の顧客: ゲームにはさまざまなかわいい動物のキャラクターがいて、それぞれの好みやニーズに合わせて最適な料理を提供する必要があります。レストランをカスタマイズする: 装飾から家具に至るまで、自分の好みと創造性に従ってユニークなレストランを作成し、より多くの顧客を引きつけることができます。多彩なメニュー：ゲーム内

574 2024-05-05

山河旅行探訪

「山河旅探偵」ゲーム紹介「山河旅探偵」は、中国風の推理・調査ゲームで、魅力的なストーリー展開が特徴です。このゲームは、伝統的な中国文化要素と古典的な推理や調査のゲームプレイを巧みに組み合わせており、プレイヤーに謎と驚きに満ちたゲーム世界を提供します。ゲームでは、プレイヤーは才能のある若い探偵の役割を果たし、山や川を旅してさまざまな複雑で混乱する事件を調査します。それぞれの事件は慎重に設計されており、サスペンスと挑戦に満ちています。プレイヤーは知恵と観察を駆使して手がかりを集め、真実を推理する必要があります。このゲームは、美しい中国のスタイルを採用し、古代中国の要素を組み合わせたユニークなグラフィックスタイルを持っています。

946 2024-05-05

「愛とプロデューサー」

「恋とプロデューサー」はエレックスが開発した女性向け恋愛育成型ゲームです。このゲームでは、あなたはプロデューサーとなり、4 人の個性的な男性主人公とともにロマンチックな旅に乗り出します。ゲームの特徴: 実在の人物による吹き替えで、最も現実的なプロット体験を復元します。豊かなゲームプロットと感情の起伏に富んだストーリーがあなたをゲームに没入させます。 AR ゲームの動作を完全に復元し、ゲームをより快適に楽しむことができます。ユニークなゲームプレイにより、主人公をより深く理解し、異なる種類の愛を体験できます。タスクやアクティビティを通じて小道具を獲得し、それらを使用してヒーローの属性を向上させます。

519 2024-05-04

最強の頭脳 3

「The Biggest Brain 3」は、あなたの脳の限界に挑戦し、知恵とスキルを披露する、エキサイティングで興味深い知的競争ゲームです。このゲームでは、プレイヤーは解読、推論、記憶、その他のトピックを含むさまざまな精神的な課題に直面するため、頭脳は総合的に鍛えられます。ゲームの特徴: 解読、推理、記憶などの分野をカバーする多様なチャレンジテーマで、飽きることなく楽しめます。豊富なレベルデザイン、徐々に難易度が上がり、IQの限界に挑戦します。シングルプレイヤーチャレンジやマルチプレイヤーバトルなど、さまざまなゲームモードが利用可能で、友達と IQ を競うことができます。絶妙な映像デザインと音響効果が生み出す、

869 2024-05-04

オッドダスト：ダミラ

『アース：ダミラ』ゲーム紹介『アース：ダミラ』は、魅力的なフル3DエイリアンライトSFオタクタワーディフェンスゲームです。このゲームでは、プレイヤーはアトゥム号の船長となり、人類の希望を継承するという重要な使命を担い、生命力と生命力に満ちた「生まれたばかりの」少女たちを率いて、謎の惑星ダミラに足を踏み入れて探索します。この緑の異星のすべて。ユニークな SF 設定と絶妙な 3D グラフィックスを備えたこのゲームは、プレイヤーに未知と挑戦に満ちた異質な世界を提示します。この神秘的な土地で、プレイヤーは少女たちを率いて、エイリアンの星からの脅威に対抗するための強力な防御を構築する必要があります。

254 2024-05-03

若き西遊記2

『西遊記 2』ゲーム紹介『西遊記 2』の世界に足を踏み入れると、オリエンタルな魅力に満ちた壮大で幻想的なインダストリアルパンクアドベンチャーが始まります。ジュブナイルカードシリーズの最新傑作として、このゲームはパンクスタイルと国家トレンドの要素を完璧に融合させ、プレイヤーにこれまでにない西遊記の世界を提供します。まず、ゲームのスタイルが独特です。デザイナーは、伝統的な中国絵画や版画の技術と現代のパンク要素を巧みに組み合わせ、すべてのキャラクターとすべてのシーンを強い東洋の魅力と前衛的なパンクの雰囲気に満ちたものにしました。プレイヤーは、古典と現代、東洋と西洋が融合した世界にいるようです。

951 2024-05-03

24時間リーダーボードの閲覧

詳細>

最新のチュートリアル

[Web フロントエンド] Node.js クイックスタート

海外のWeb開発フルスタックコースの完全なコレクション

1650 2024-04-24
Go言語実践GraphQL

1923 2024-04-19
550W ファンマスターが JavaScript をゼロから段階的に学習します

3343 2024-04-18
Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

2877 2024-04-10
MySQL 入門 (教師モッシュ)

1752 2024-04-07
Mock.js | Axios.js | Json | Ajax -- 10 日間の質の高いクラス

2563 2024-03-29

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