动态滚动条

来源：互联网发布：javascript插件有什么编辑：程序博客网时间：2024/06/06 08:48

$.fn.bar = function(opt) {"use strict";var defaults = {'barBox': '.barBox',//进度条边框'barBg': '.barBg',//进度条背景'going': '.going',//进度条的当前进度(显示给用户)'dataRel': 'dataRel',//进度条目标进度值(用于计算)'count': 0//进度当前已走多少进度};var settings = $.extend({},defaults, opt);return this.each(function() {var self = $(this),per = self.find(settings.barBox),div = per.find(settings.barBg),rat = self.find(settings.going),num = parseInt(per.attr(settings.dataRel)),interval,count = 0,plus = function () {div.css({width:count+'%'});rat.html(count);if (count == num || count == 100) {clearInterval(interval);};count++;};interval = setInterval(plus,10);});}

html

<!doctype html><html><head><meta charset="utf-8"><title>demo</title><link rel="stylesheet" type="text/css" href="../bootstrap3.2.0/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="../css/demo.min.css"><style type="text/css"> body{ text-align:center; } .barWarp,.bar{height: 51px;width: 100%;padding: 11px 0;}.barBox,.barx{height:6px;width:143px;margin: 8px auto 0;border-radius:5px;background:#cccccc;}.barBg,.barg{width:0%;height:6px;border-radius:5px;background:#2ca817;}</style> </head><body><div class="barWarp"><div>当前进度 <i class="going">80</i>%</div><div class="barBox" dataRel="80">    <div class="barBg" style="width: 80%;"></div>    </div>    </div>    <div class="bar"><div>当前进度 <i class="go">80</i>%</div><div class="barx" data-rel="50">    <div class="barg" style="width: 50%;"></div>    </div>    </div><script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>    <script type="text/javascript" src="../js/base.js"></script>    <script type="text/javascript">    $(function(){        $('.barWarp').bar();        $('.bar').bar({        'barBox': '.barx',        'barBg': '.barg',        'going': '.go',        'dataRel': 'data-rel'        });    });    </script>   </body></html>

0 0