首页 > 代码库 > 简单的进度条演示
简单的进度条演示
今天在回答一个网友的问题时，学习了一下进度条的制作，其实也简单，是用jQuery的animate来实现的。
这是animate的的文档，进度条里主要用到了step和complete两个属性：http://jquery.bootcss.com/animate/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .progress{width: 100%; height: 16px; background-color: #CCC; position: relative;} .progress .ibar {width: 0px; height: 16px; background-color: #9370DB; position: absolute;} .progress .num{position: absolute; left: 50%; margin-left: -10px;} </style></head><body> <div class="content"> <div class="progress" id="process"> <div class="ibar" id="ibar"></div> <div class="num" id="num">0%</div> </div> </div></body><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script language = "JavaScript">$(function(){ $("#ibar").animate( {"width":"100%"}, { duration:3000, easing:"linear", step: function(now, fx){ $("#num").html(parseInt(now)+"%"); }, complete:function(){ $("#process").fadeOut(); } } )})</script></html>
简单的进度条演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。