利⽤jquery和BootStrap实现动态滚动条效果
在某项⽬中遇到excel导⼊时客户要求显⽰滚动条效果，在此基础上使⽤js为其封装了个进度条类，只需要简单为其创建个div容器就可轻松实现效果，类具体如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bootstrap 101 Template</title>
<!-- 最新版本的 Bootstrap 核⼼ CSS ⽂件 -->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <script src="cdn.jsdelivr/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- 进度条⽰例 -->
<!-- <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<span class="proText"></span>
</div>
</div> -->
jquery滚动条滚动到底部<div id="contain"></div>
<button onclick="refreshPro()">refresh</button>
<button onclick="finish()">finish</button>
<button onclick="remove()">remove</button>
<script>
var progressBar = null;
function refreshPro() {
var con = $("#contain");
progressBar = new ProgressBar();
progressBar.setContainer(con);
progressBar.showProcessBar();
}
function finish() {
progressBar.finishProcessBar();
}
function remove() {
progressBar.destroyProcessBar();
}
/
/如果在规定时间内都没有完成进度条，则停留在90%地⽅,⼀旦完成⽴刻到100%
//写在ajax请求执⾏开始处进⾏创建，执⾏完成后执⾏完成进度条进度为100%
//定义进度条类
//提供构建/展⽰/销毁等⼯作
//container为要包含进⼊条展⽰容器
function ProgressBar($container) {
var self = this;
var container;
if($container != null) {
container = $container;
}
var interval; //创建的周期函数对象
var _id = "progress_bar" + new Date().getTime(); //progressBar随机id编号
self.setContainer = function(_container) {
container = _container;
}
//为当前容器加⼊progress
container.append('<div class="progress" id="'+ _id +'"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="proText"></span></div></div>');
}
self.beginProcessBar = function() {
var i = 0;
interval = setInterval(function() {
i += 10;
if(i <= 90) {
$("#" + _id + " .progress-bar").css({"width":i + "%"});
$("#" + _id + " .proText").text(i + '%');
}
}, 1000);
}
self.showProcessBar = function() {
self.beginProcessBar();
}
self.finishProcessBar = function() {
if(interval != null) {
$("#" + _id + " .progress-bar").css({"width": "100%"});
$("#" + _id + " .proText").text('100%');
clearInterval(interval);
}
}
self.destroyProcessBar = function() {
$("#" + _id).remove();
}
return self;
}
</script>
</body>
</html>
总结
以上所述是⼩编给⼤家介绍的利⽤jquery和BootStrap实现动态滚动条效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。