这篇文章实现的百分比进度条,技术含量并不高,但着重想强调的是实现过程中应该引起注意的几个问题。
1、如果元素中有定义宽度,并且其值为百分比值如:.progressbar .pb_inner{width:1%;},则jquery中的$(".progressbar .pb_inner").css("width")获取到的值并非css中定义的1%; 而是经过计算后的值,实例中取到的值为:父元素的600px X 1%=6px(注意:在原生js中getComputedStyle()方法取得的值也是计算后的值!),而我们是用js通过以改变pb_inner的宽度百分比来实现的,并且在进度条中实时显示当前加载的百分值,解决思路是:避开直接获取元素的百分值,js中用'自+1的变量+ “%”'的形式做字符串拼接,再赋值到css()中,这样处理会省掉中间很多不必要的转换操作,有兴趣的同学可亲身感受下,呵。
2、给进度条加动感展示效果:一png背景图+css3的animation、keyframes+伪元素:before/:after。值得注意的是:CSS伪元素不是DOM元素,因此你无法直接选择到它们。变通的做法是:为该元素添加新类选择器,并通过设置新类选择器的属性来达到改变伪元素属性的效果。详细可参考:https://www.jb51.net/article/52992.htm
完整源码:
提示:你可以先修改部分代码再运行。
结合运用css3新属性+jq能做出很多很好看、很有创意的效果,但这过程中实现思路以及遇到问题会变通处理的思维方式 会显示更加重要! 功力尚浅,路还很长.....
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}