兼容到IE6的进度条

最新推荐文章于 2020-07-16 17:57:45 发布

ltx06

最新推荐文章于 2020-07-16 17:57:45 发布

阅读量1.5k

点赞数 2

分类专栏： web开发文章标签：进度条兼容IE6 兼容IE8 圆形进度条条形进度条

本文链接：https://blog.csdn.net/ltx06/article/details/53374907

版权

web开发专栏收录该内容

186 篇文章 0 订阅

订阅专栏

圆形进度条：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--[if IE]>
    <script src="/html5shiv.min.js"></script>
    <script src="/excanvas.js"></script>
    <![endif]-->
</head>
<body>
<canvas class="loader"></canvas>
<script src="/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/jquery.classyloader.js"></script>
<script>
        $('.loader').ClassyLoader({
            animate: true,
            speed: 50,//一次动画循环的时间，单位毫秒，默认值为1
            diameter: 30,//圆的直径
            fontSize: '20px',//字体的大小
            fontFamily: 'Courier',
            fontColor: 'rgba(0,0,0,0.4)',
            lineColor: 'rgba(255,175,255,0.7)',
            percentage: 30,//百分比
            lineWidth: 10,//环的大小
            start: 'top',
            remainingLineColor: 'rgba(200,200,200,0.1)'
        });
</script>
</body>
</html>

这里用到四个插件：

html5shiv.min.js用于兼容html5;

jquery_1.9.1.js不用多说;

excanvas.js用于兼容canvas;

jquery.classyloader.js是圆形进度条的插件，非常的强大.

其中我对jquery.classyloader.js做了点修改，使其能兼容IE6~IE8：

有两处修改，都是一样的，就是在：

var ctx = r[0].getContext("2d");

的前面加：

if(typeof window.G_vmlCanvasManager!="undefined"){
    r[0] = window.G_vmlCanvasManager.initElement(r[0]);
}

最终：

if(typeof window.G_vmlCanvasManager!="undefined"){
    r[0] = window.G_vmlCanvasManager.initElement(r[0]);
}
var ctx = r[0].getContext("2d");

条形进度条：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        progress {
            display: inline-block;
            width: 160px;
            height: 20px;
            border: 1px solid #0064B4;
            background-color:#e6e6e6;
            color: #0064B4; /*IE10*/
        }
        /*ie6-ie9*/
        progress ie {
            display:block;
            height: 100%;
            background: #0064B4;
        }
        progress::-moz-progress-bar { background: #0064B4; }
        progress::-webkit-progress-bar { background: #e6e6e6; }
        progress::-webkit-progress-value  { background: #0064B4; }
    </style>
    <script>
        if (typeof window.screenX !== "number") {
            document.createElement("progress");
            document.createElement("ie");
        }
    </script>
</head>
<body>
<progress max="100" value="20"><ie style="width:20%;"></ie></progress>
<span>20%</span>
</body>
</html>

条形进度条的代码来自

http://www.zhangxinxu.com/study/201302/progress-compatible-ie6-ie9.html

这两款进度条都是能够兼容到IE6的，其中圆形进度条还有动态效果，非常的强大！！！

最后一款无敌的条形进度条：

<!doctype html>
<html>
<body>
    <div style="width: 30%;height: 20px;border: #00B83F solid 1px;"><!--控制进度条大小-->
        <div style="width: 80%;background-color: #00B83F;height: 20px;"></div><!--进度条-->
    </div>
</body>
</html>

核心：两个div的嵌套

可以在里div的内部或右边加个百分比显示。

这种条形进度条在任何浏览器下都可以显示，ie5都行！

这种条形进度条常常与ligerUI等等结合应用。

想要动态？写JavaScript就行啦~

ltx06

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
兼容到IE6的进度条

圆形进度条： $('.loader').ClassyLoader({ animate: true, speed: 50,//一次动画循环的时间，单位毫秒，默认值为1 diameter: 30,//圆的直径 f
复制链接

扫一扫

专栏目录