当前位置：首页 > 下载站 > js特效 > jQuery特效 > jQuery的弹性滑动动画进度条特效

jQuery的弹性滑动动画进度条特效

分类: js特效 / jQuery特效	发布时间: 2017-12-23	访问量: 1016
下载量: 42

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

Swoole5 Hyperf3 php8新版本协程框架讲说

【web前端】Node.js快速入门

519 2024-04-26
国外Web开发全栈课程全集

615 2024-04-24
Go语言实战之 GraphQL

583 2024-04-19
550W粉丝大佬手把手从零学JavaScript

1025 2024-04-18
python大神Mosh，零基础小白6小时完全入门

870 2024-04-10
MySQL 初学入门（mosh老师）

729 2024-04-07

jQuery的弹性滑动动画进度条特效

<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" 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="container">
<div class="content">
<div class="row">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br>
</div>
<div class="box">
<pre><code>
element.ElasticProgress({
buttonSize: 60,
fontFamily: "Montserrat",
colorBg: "#adeca8",
colorFg: "#7cc576",
onClick: function(event) {
console.log("onClick");
$(this).ElasticProgress("open");
},
onOpen: function(event) {
fakeLoading($(this));
},
onFail: function(event) {
$(this).ElasticProgress("open");
},
onCancel: function(event) {
$(this).ElasticProgress("open");
}
});
</code></pre>
</div>
</div>
<div class="row">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br>
</div>
<div class="box">
<pre><code>
element.ElasticProgress({
align: "center",
fontFamily: "Roboto",
colorFg: "#77c2ff",
colorBg: "#4e80dd",
bleedTop: 110,
bleedBottom: 40,
buttonSize: 100,
labelTilt: 70,
arrowDirection: "up",
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="row">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br>
</div>
<div class="box">
<pre><code>
element.ElasticProgress({
align: "center",
colorFg: "#686e85",
colorBg: "#b4bad2",
highlightColor: "#ffab91",
width: Math.min($(window).width()/2 - 100, 600),
barHeight: 10,
labelHeight: 50,
labelWobbliness: 0,
bleedTop: 120,
bleedRight: 100,
buttonSize: 60,
fontFamily: "Arvo",
barStretch: 0,
barInset: 4,
barElasticOvershoot: 1,
barElasticPeriod: 0.6,
textFail: "Download Failed",
textComplete: "Download Complete",
arrowHangOnFail: false,
onClick: function() {
$(this).ElasticProgress("open");
},
onOpen: function() {
fakeLoading($(this))
},
onComplete: function() {
var $obj = $(this)

TweenMax.delayedCall(1.5, function() {
$obj.ElasticProgress("close");
})
}
});
</code></pre>
</div>
</div>
<div class="row">
<div class="box box--centered">
<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div>
</div>
<div class="box">
<pre><code>
var e = new ElasticProgress(document.querySelectorAll('.Download')[3], {
colorFg: "#ed7499",
colorBg: "#635c73",
highlightColor: "#ed7499",
barHeight: 14,
barInset: 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>

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

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

</html>

非常漂亮的基于jQuery跟TweenMax.js插件实现的弹性滑动动画进度条特效。