资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

HTML5中进度条progress元素及兼容性处理的示例分析

HTML5中进度条progress元素及兼容性处理的示例分析,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

成都创新互联是一家集网站建设,嘉鱼企业网站建设,嘉鱼品牌网站建设,网站定制,嘉鱼网站建设报价,网络营销,网络优化,嘉鱼网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

一、progress元素基本了解
1.基本UI
progress元素属于HTML5家族,指进度条。IE10+以及其他靠谱浏览器都支持。如下简单code:

XML/HTML Code复制内容到剪贴板

  1. o(︶︿︶)o  

是个很带感的进度条吧。有人奇怪:“唉~怎么我看到的是个字符表情捏?” 恩…我只能对你说:“鄙视你,丫的都舍不得用靠谱点的浏览器吗?!”
这个默认的效果,不同浏览器下的效果不尽相同,如下截图们(window 7下):
HTML5中进度条progress元素及兼容性处理的示例分析

IE10颗粒的缓动聚散效果,还是挺让人眼前一亮的。

2.基本属性
max, value, position, 以及labels.
(1)max指最大值。若缺省,进度值范围从0.0~1.0,如果设置成max=100, 则进度值范围从0~100.
(2)value就是值了,若max=100, value=50则进度正好一半。value属性的存在与否决定了progress进度条是否具有确定性。什么意思?比方说没有value,是不确定的,因此IE10浏览器下其长相是个无限循环的虚点动画;但是,一旦有了value属性(即使无值),如, 也被认为是确定的,虚点动画进入仙人模式——>变条条了,如下截图:
HTML5中进度条progress元素及兼容性处理的示例分析

(3)position是只读属性,顾名思意,当前进度的位置,就是value / max的值。如果进度条不确定,则值为-1.
(4)labels也是只读属性,得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels,返回的就是HTMLCollection, 下为我的某测试截图(截自Opera浏览器下,目前FireFox18.0.2以及IE10貌似都不支持)。

二、progress元素兼容性处理示例
html代码

XML/HTML Code复制内容到剪贴板

  1.   

css兼容代码

CSS Code复制内容到剪贴板

  1. 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; }

基本上完美的解决了各浏览器的差别。

看完上述内容,你们掌握HTML5中进度条progress元素及兼容性处理的示例分析的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前题目:HTML5中进度条progress元素及兼容性处理的示例分析
地址分享:http://cdkjz.cn/article/ghseji.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220