欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript 进度条的几种方法

程序员文章站 2022-06-07 19:43:05
...
我们先看看最终效果:

javascript 进度条的几种方法

第一步,基本
构建基本的代码,看效果演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

第二步,给进度条增加文字显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

他的原理就是采用 相对定位和绝对定位,然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。
第三步,制作进度条的第二种方式---直接使用图片+背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

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

第四步,应用
最后我们看一个简单的应用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style> 
*{

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



更多javascript 进度条的几种方法相关文章请关注PHP中文网!

相关标签: javascript进度条