简单网站建设哪家便宜关键词排名手机优化软件
这是一款效果非常炫酷的基于TweenMax和SVG的炫酷弹性进度条动画特效。该弹性进度条特效在点击触发按钮之后，按钮会变形为进度条，然后一个滑块在它上面滑动，就像重物滑过绳子的感觉，非常有创意。
在线演示
使用方法
该弹性进度条效果需要GSAP的支持，还要引入lastic-progress.min.js文件。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script><script src="path/to/js/elastic-progress.min.js"></script> HTML结构
可以使用一个<div>元素来作为按钮。
<div class="Upload" role="button" aria-label="Upload file"></div> 这里使用带role="button"的<div>元素来作为按钮，而不是直接使用一个<button>元素的原因是，根据W3C规范的建议，按钮元素不应该有交互元素。
JavaScript
可以通过纯JS来初始化该弹性进度条插件。
var element=document.querySelector('.Upload');var progress=new ElasticProgress(element, { /*options*/ });// 或者...var progress=new ElasticProgress('.Upload', { /*options*/}); 也可以通过jQuery来初始化该弹性进度条插件。
$('.Upload').ElasticProgress({/*options*/}); 配置参数
配置参数设置在构造函数上，类似下面的样子：
var progress=new ElasticProgress('.Upload', {colorFg:"#FF0000",buttonSize:80,//...}) 可用参数
arrowDirection：类型：string。箭头的方向，可取值有：'up'或'down'。默认值为'down'。colorFg，colorBg：类型：string。前景（箭头和进度条过滤部分）的颜色和背景（圆形，整个进度条背景），默认值为白色和黑色。highlightColor：类型：string。边框高亮的颜色，默认值为#08F。background：类型：string。“弹出”动画时遮罩层的颜色。默认为body的背景色。buttonSize：类型：number。圆形按钮的大小。默认值为元素的高度。width：类型：number。进度条扩展的宽度。默认值为元素的宽度。/li>labelHeight：类型：number。标签的高度，单位像素，默认值53。barHeight：类型：number。进度条的厚度，默认值为4。barInset：类型：number。进度条的填充部分，默认值为-0.5。bleedTop、bleedRight、bleedLeft和bleedBottom：类型：number。图形的margin值。默认为100, 50, 50 和 60。fontFamily：类型：string。标签上的字体。默认值为'Helvetica Neue','Helvetica','Arial',sans-serif。fontWeight：类型：string。默认值为'bold'。textComplete、textFail和textCancel：类型：string。在以上事件中显示的文本。默认值分别为：'Done'、'Failed'和'Canceled'。barStretch：类型：number。进度条拉伸的最大距离。默认为20。jumpHeight：类型：number。箭头和标签跳动的距离。默认为50。barElasticOvershoot和barElasticPeriod：类型：number。弹性动画的设置。默认值为1.8和0.15。labelWobbliness：类型：number。在进度条动画期间标签的动画设置。默认为40。arrowHangOnFail和arrowHangOnCancel：类型：boolean。设置在这2个事件中箭头是否会“跌落”下来。默认值都是true。
事件
按钮本身没有任何操作。你可以通过下面的事件来控制按钮的行为。
var progress=new ElasticProgress('.Upload', {// ...onClick:function(){progress.open();}});function theFunctionYouAreUsingToCheckProgress(){// ...progress.set(value);}// 通过jQuery$(".Upload").ElasticProgress({// ...onClick:function(){$(this).ElasticProgress('open');}});function theFunctionYouAreUsingToCheckProgress(){// ...$(".Upload").ElasticProgress('set',value);} 可用事件
onClick：类型：function。在用户点击按钮时触发。onOpen：类型：function。当进度条完成打开动画时触发。onChange：类型：function。当进度条的值发生改变时触发。onComplete：类型：function。当进度条结束时触发。onClose：类型：function。当关闭动画结束时触发。onFail：类型：function。当“失败”动画开始时触发。onCancel：类型：function。当取消动画开始时触发。
方法
open()：开始打开动画（将按钮转换为进度条）。close()：将进度条转换为按钮。setValue(value number)：设置进度条值的百分比，0-1。getValue()：返回当前进度条的值。fail()和cancel()：执行“失败”和“取消”动画。complete()：执行“完成”动画。可以使用setValue(1)来替代它。onClick(callbackfunction)、onOpen(callbackfunction)、onChange(callbackfunction)、
onComplete(callbackfunction)、onClose(callbackfunction)、onFail(callbackfunction)
和onCancel(callbackfunction)：相同名称参数的别名。