利用jquery和BootStrap实现动态滚动条效果


Posted in jQuery onDecember 03, 2018

在某项目中遇到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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/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> -->
    
    <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
        self.createProgressBar = function() {
          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.createProgressBar();
          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实现动态滚动条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery手风琴的简单制作
May 12 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
You might like
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
Python 专题一 函数的基础知识
2017/03/16 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
使用python绘制二维图形示例
2019/11/22 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
python集合的新增元素方法整理
2020/12/07 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
给朋友的道歉信
2014/01/09 职场文书
五一服装活动方案
2014/01/11 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
地震捐款倡议书
2014/08/29 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技