首頁 > 文章 > web前端 > javascript 進度條的幾種方法

javascript 進度條的幾種方法

高洛峰原創: 2016-12-16 16:38:531094瀏覽

我們先看看最終效果：

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中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：ProgressBar.js – 漂亮的響應式 SVG 進度條下一篇：ProgressBar.js – 漂亮的響應式 SVG 進度條

看更多