cari

Rumah >hujung hadapan web >tutorial js >javascript 进度条的几种方法

javascript 进度条的几种方法

高洛峰
高洛峰asal
2016-12-16 16:38:531177semak imbas

我们先看看最终效果：

1.png

第一步，基本 
构建基本的代码，看效果演示： 

<!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中文网！

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：ProgressBar.js – 漂亮的响应式 SVG 进度条Artikel seterusnya：js进度条控件实现

Artikel berkaitan

Lihat lagi