首頁

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