进度条动态加载

来源：互联网发布：php公司网站源码编辑：程序博客网时间：2024/06/01 08:13

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1"><title>动画效果animate</title><script src="jquery-1.8.3.js" type="text/javascript"></script><style type="text/css">ul li{list-style:none;}.expl li{line-height:30px;}.expl .per{height:10px;width:60%;font-size:0;line-height:0;overflow:hidden;float:left;display:inline;background:#e8ecef;margin:10px 0 0 20px;border-radius:15px}.expl .per div{background:#18b160;height:10px;float:left;width:0%;border-radius:15px}.expl strong{font-weight:normal;float:left;margin-left:5px}</style></head><body><div class="expl">    <ul>        <li class="ratio-per">            <div class="per" data-rel="88.00">                <div style="width: 88%;"></div>            </div>            <strong class="ratio">88%</strong>        </li>    </ul></div>       <script type="text/javascript">$(function(){showPer()});function showPer(){var tar = $('.ratio-per');tar.each(function() {var self = $(this);var per = self.find('.per');var div = per.find('div');var rat = self.find('.ratio');var num = parseInt(per.attr('data-rel'));var interval;var count = 0;var plus = function () {div.css({width:count+'%'});rat.html(count + '%');if (count == num || count == 100) {clearInterval(interval);};count++;};interval = setInterval(plus,10);    });};</script></body></html>

转载：http://www.yooli.com/dingcunbao/detail/1.html 觉得这个网站的这个效果挺好的

0 0