首頁

JS特效

jQuery特效

jQuery的彈性滑動動畫進度條特效

現在下載預覽

<頭>
<元字元集=“UTF-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<元名稱=「視窗」內容=「寬度=裝置寬度，初始比例= 1，最大比例= 1.0，使用者可擴充=否」>
TweenMax.js jQuery彈性滑動動畫進度條特效

</頭>

<前><程式碼>
element.ElasticProgress({
按鈕大小：60，
字體系列：“蒙特塞拉特”，
colorBg: "#adeca8",
colorFg: "#7cc576",
onClick: 函數(事件) {
console.log("onClick");
$(this).ElasticProgress("打開");
},
onOpen: 函數(事件) {
fakeLoading($(this));
},
onFail: 函數(事件) {
$(this).ElasticProgress("打開");
},
onCancel: 函數(事件) {
$(this).ElasticProgress("打開");
}
});
</代號></pre>

<前><程式碼>
element.ElasticProgress({
居中對齊”，＃＃＃字體系列：“Roboto”，
colorFg: "#77c2ff",
colorBg: "#4e80dd",
出血頂部：110，
出血底部：40，
按鈕大小：100，
標籤傾斜：70，
箭頭方向：“向上”，
onClick: 函數() {
$(this).ElasticProgress("打開");
},
onOpen: 函數() {
fakeLoading($(this))
},
onCancel: 函數() {
$(this).ElasticProgress("關閉");
},
onComplete: 函數() {
var $obj = $(this)
$obj.ElasticProgress("關閉");
}
});
</代號></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：假，
onClick: 函數() {
$(this).ElasticProgress("打開");
},
onOpen: 函數() {
fakeLoading($(this))
},
onComplete: 函數() {
var $obj = $(this)

TweenMax.delayedCall(1.5, function() {
$obj.ElasticProgress("關閉");
})
}
});
</代號></pre>

<前><程式碼>
var e = new ElasticProgress(document.querySelectorAll('.Download')[3], {
colorFg: "#ed7499",
colorBg: "#635c73",
高亮顏色：“#ed7499”，
條形高度：14，
條插入：10，
字體系列：「Indie Flower」
});
e.onClick(function() {
e.open();
})
e.onOpen(函數() {
fakeLoading(e, 2, 0.5);
});
e.onFail(函數() {
e.close();
})
</代號></pre>

<腳本 src="js/jquery.min.js"></腳本>
<腳本 src="js/TweenMax.min.js"></腳本>
<腳本 src="js/elastic-progress.js"></script>
<腳本 src="js/main.js"></腳本>

;
</body>

</html>

非常漂亮的基於jQuery跟TweenMax.js插件實現的彈性滑動動畫進度條特效。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

HTML、CSS和jQuery：製作一個帶有動畫效果的載入進度條

27 Oct 2023

HTML、CSS和jQuery：製作一個帶有動畫效果的載入進度條載入進度列是一種常見的網頁載入效果，它能讓使用者清楚地看到目前頁面載入的進度，提升使用者體驗。在本篇文章中，我們將使用HTML、CSS和jQuery來製作一個帶有動畫效果的載入進度條，並且會提供具體的程式碼範例。 HTML結構首先，讓我們來建立HTML的基本結構。我們需要一個包含進度條的容器元素，並在

HTML5超逼真下雪場景效果

18 Jan 2017

這是一款以jquery為基礎的超逼真下雪場景特效。此特效使用jquery程式碼來動態外掛程式html5 canvas元素，然後在canvas中製作下雪特效。

jQuery與CSS3超炫漢堡變形動畫特效

18 Jan 2017

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過jQuery來附加按鈕事件，並透過CSS3 transform和animation來製作動畫特效。

jquery打字特效停止回刪

23 May 2023

隨著網路的普及，打字特效的應用越來越廣泛，jquery打字特效也成為了許多網站開發人員的首選。然而，在實現這種特效的過程中，細節問題常常會影響使用者體驗，例如打字特效的回刪問題。本文將介紹如何利用jquery打字特效停止回刪，提升使用者的瀏覽體驗。 jquery打字特效的實作可以使用現成的插件，如typed.js和jQuery.Typewriter等。這些插件都是基於jquery的

jQuery動畫特效實例教學_jquery

16 May 2016

這篇文章主要介紹了jQuery動畫特效,詳細敘述了jQuery動畫特效的實現方法,非常實用,需要的朋友可以參考下

漂亮的jquery提示效果(仿騰訊彈出層)_jquery

16 May 2016

jquery提示效果很多，本文也提供一個超漂亮的仿騰訊彈出層效果，熱愛特效的你可千萬不要錯過了啊，希望本文提供的案例對你學習jquery特效有所幫助

jQuery實現玻璃流光質感的手風琴特效_jquery

16 May 2016

這篇文章主要介紹了jQuery實現玻璃流光質感的手風琴特效，是一款基於jQuery CSS3實現手風琴特效，希望你可以喜歡。

jQuery動畫與特效詳解

28 Nov 2017

jquery中我們最需要用的除了異步，就是動畫和特效了吧，要想給用戶更好的體驗jquery是最好的選擇，就讓我們一起來看看jquery的動畫、特效的詳解吧