我们先看看最终效果:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

再根据每个A元素所处的位置来分别为他们设置背景的移动大小,构建基本的HTML结构和CSS样式 0%的状态。第一步,基本 构建基本的代码,看效果演示:

我们先看看代码

制作进度条的两种方法

1,构建基本的HTML结构和CSS样式 0%的状态: 50%的状态: 80%的状态:
100%的状态: 这步非常简单,相信大家都能看明白。

是不是非常简单,而我们所用到的图片也仅仅是下面的2张而已

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]第二步,给进度条增加文字显示

威尼斯人平台,现在我们来分析 background-position
的用法:A元素一开始的时候背景位置设置成 background-position:500px
500px,而它的大小仅只有100px*100px而已,所以A标签下的所有背景都超过了可视范围无法显示,我们一开始看见的黑白照片就是UL的背景图象。接着当鼠标移动到A元素上的时候,再根据每个A元素所处的位置来分别为他们设置背景的移动大小,这样就形成上面的黑白图片交替效果。

制作进度条的两种方法

2,给进度条增加文字显示
一个进度条需要包含对应的进度文字显示,本例中,我希望文字显示在进度条的中间。
接下来,我们在进度条元素内增加一个显示 文字的div。
很显然,直接添加div后,div会占据原先绿色进度条的位置。看下面例子: 50%
那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢?
估计你也想到了,那就是绝对定位。通过对父元素添加相对定位,然后给子元素添加绝对定位,设置子元素的左边距和上边距都为0。
看下面的例子: 50% 这时你会发现文字被遮盖了,相信你第一时间就会想到用
z-index 去设置他们的层级关系。
对,我也选择的是它。通过给他们设置不同的z-index值来确定层级关系,值越大越显示在上面。看下面例子:
50% 80% 100% 这是第一种方式,也是目前最为流行的 制作进度条的方式。
他的原理就是采用 相对定位和绝对定位,然后通过背景不同来控制进度。
接下来我们看第二种方式制作进度条。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]他的原理就是采用
相对定位和绝对定位,然后通过背景不同来控制进度。
接下来我们看第二种方式制作进度条。
第三步,制作进度条的第二种方式—直接使用图片+背景图片

3,制作进度条的第二种方式—直接使用图片+背景图片
如果你想在上面进度条上添加进度显示的文字,你应该知道怎么办了。
对,就是使用绝对定位+相对定位来控制。 0% 20% 50% 80% 100%
这种方式的原理就是 利用
一张img图片,然后给img图片又设置背景图,通过背景图的background position
属性 来显示不同的部分。 当然这种方式 对图片有点要求
。你仔细一点就会发现,宽度是img的2倍。
另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。
总的来说,这应该算一个技巧,在实际项目中,也是能使用的。

Dev By jb51.net

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这种方式的原理就是 利用
一张img图片,然后给img图片又设置背景图,通过背景图的background position
属性 来显示不同的部分。 当然这种方式 对图片有点要求
。你仔细一点就会发现,宽度是img的2倍。
另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值,实际可以采用
% 来控制 更精确, 比如: background-position:80% 50%;等。
总的来说,这应该算一个技巧,在实际项目中,也是能使用的。 第四步,应用
最后我们看一个简单的应用:

4,应用 0%

增加至50%

减少至20%

我使用的是第二种方式来做控制,通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做,第一种方式需要改变的是进度条的 width
属性。

Dev By jb51.net

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做,第一种方式需要改变的是进度条的 width
属性。 文件打包下载

相关文章