zoukankan      html  css  js  c++  java
  • 简单的jquery进度条插件LineProgressbar.js,myProgress.js

    参考    http://www.lanrenzhijia.com/jquery/4121.html

    demo下载

    <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> 
    
        $(function(){ 
            $('#progressbar1').LineProgressbar({ 
                percentage: 50 
            }); 
            $('#progressbar2').LineProgressbar({ 
                percentage: 25, 
                fillBackgroundColor: '#1abc9c' 
            }); 
            $('#progressbar3').LineProgressbar({ 
              percentage: 61, 
              fillBackgroundColor: '#e67e22', 
              height: '35px' 
            }); 
            $('#progressbar4').LineProgressbar({ 
              percentage: 78, 
              fillBackgroundColor: '#f1c40f', 
              height: '65px', 
              radius: '50px' 
            }); 
        }) 
    

      

    在页面中引入jquery.lineProgressbar.css和jquery.lineProgressbar.js文件.

    1
    2
    <link rel="stylesheet" href="path/to/jquery.lineProgressbar.css">
    <script src="path/to/js/circleMagic.js"></script>

    使用一个<div>作为进度条的容器。

    1
    <div id="progressbar1"></div>

    在页面DOM元素加载完毕之后,通过下LineProgressbar()方法来初始化该jquery进度条插件。

    1
    $('#progressbar1').LineProgressbar();

    LineProgressbar.js进度条插件的可用配置参数有:

    参数

    定义进度条的宽度。

    类型 默认值 描述  
    percentage int null 定义进度条的百分比数。
    ShowProgressCount boolean true 定义是否显示百分比数值。
    duration int 1000 定义进度条动画的速度。默认为1000毫秒。可以使用整数值孟获关键字:slow或fast。
    fillBackgroundColor string '#3498db' 定义进度条的背景填充色。
    backgroundColor string '#EEEEEE' 定义进度条的背景色。
    radius string '0px' 定义进度条的圆角。
    height string '10px' 定义进度条的高度。
    width string '100%'

    ===================================================== 

    基于jQuery实现的myProgress.js加载loading动画效果

    参考 :http://www.lanrenzhijia.com/jquery/3303.html

    demo下载

            $("#div1").myProgress({speed: 1000, percent: 30,  "100px", height: "10px"});
            $("#div2").myProgress({speed: 500, percent: 100});
            $("#div3").myProgress({speed: 4000, percent: 50, "500px"});
            $("#div4").myProgress({speed: 1000, percent: 1});
    

      

  • 相关阅读:
    UVA Live Achrive 4327 Parade (单调队列,dp)
    从磁盘读取一个文件到内存中,再打印到控制台
    二分查找法
    日期:Date
    线程与进程
    泛型基本知识
    泛型
    Map集合的遍历方式:
    Arrays
    Set接口
  • 原文地址:https://www.cnblogs.com/dare/p/9046352.html
Copyright © 2011-2022 走看看