jQuery css3下载按钮进度条切换代码



67 266 89



特效描述:jQuery css3下载按钮 进度条切换代码,jQuery基于css3属性制作红色的简易的下载按钮,点击切换显示进度条加载动画,下载完成提示效果。

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div class="buttonContainer">
	<div class="complete">下载完成</div>
	<div class="ball"></div>
	<svg width="182" height="61" xmlns="http://www.w3.org/2000/svg">
	  <path id="button" d="m31.048188,4.720621l120.048623,0l0,0c15.726711,0 28.475699,11.640603 28.475699,26.000007c0,14.359399 -12.748994,25.999997 -28.475699,25.999997l-120.048623,0l0,0c-15.726693,0 -28.475699,-11.640598 -28.475699,-25.999997c0,-14.359409 12.749006,-26.000007 28.475699,-26.000007z" stroke-width="4" stroke="#e91d62" fill="none"/>
	</svg>
	<div id="counter">0</div>
</div>
<script>
$('.buttonContainer').click(function(){
	if($('.buttonContainer').hasClass('active')){
		$(this).removeClass('active');
		$('.complete').removeClass('fadein');
		$('#counter').fadeOut(100);
		$('.ball').fadeOut(100);
		count().stop;
	} else{
		$(this).addClass('active');
		$('#counter').fadeIn(200);
		$('.ball').fadeIn(200);
		count();
	}
});
//Loading
function count(){
	$({countNum: $('#counter').text()}).animate({countNum: 100}, {
	  duration: 5000,
	  easing:'linear',
	  step: function() {
		 $('#counter').text(Math.floor(this.countNum) + '%');
	  },
	  complete: function() {
		 $('#counter').fadeOut(200);
		 $('.complete').addClass('fadein');
		 $('.ball').fadeOut(200);
		  $('#button').fadeOut(100);
		  setTimeout(function() {
			   $('.buttonContainer').removeClass('active');
			  $('.complete').removeClass('fadein');
			  $('#button').fadeIn(200);
   		}, 1000);
	  }
	});
}</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 延迟加载 无限加载 延迟 加载 其他 加载动画 图片切换 图片选项卡 图标选项卡 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到