热门关键字:
jquery > jquery插件 > html5 > 网友舞影凌风分享Jquery+HTML5实现进度条加载特效

网友舞影凌风分享Jquery+HTML5实现进度条加载特效

10432
所属分类:html5
发布时间:2013/4/21 15:41:34
下载量:1632
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=192

首先非常感谢网友舞影凌风的无私分享,此Jquery特效是用HTML5实现进度条加载,只一种非常实用的功能,很多网站上都可以用得上,配合Jquery的动画插件实现了进度加载时百分比的滑动效果,代码非常少,只有几句,页面使用时只调用loading()方法即可,加载完之后可以设置跳转的页面。。。


因为用css3的缘故,所以网友们在浏览的时间请不要用IE浏览器来运行,为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。


核心代码如下:


function loading(percent){
	$('.progress span').animate({width:percent},1000,function(){
		$(this).children().html(percent);
		if(percent=='100%'){
			$(this).children().html('加载完成,正在转向首页...    ');
			setTimeout(function(){
				$('.container').fadeOut();
				location.href="http://www.jq-school.com";
			},1000);
		}
	})
}
效果如下:


网友舞影凌风分享Jquery+HTML5实现进度条加载特效






如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:进度条 网友舞影凌风 css3 HTML5 网页加载 滑动插件
  • 网友舞影凌风分享Jquery+HTML5实现进度条加载特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友舞影凌风分享Jquery+HTML5实现进度条加载特效
  • 网友舞影凌风分享Jquery+HTML5实现进度条加载特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐