效果如下:
一、設(shè)計(jì)思路
分為以下幾步（僅供參考）
【豎線線】
這個(gè)采用ul的list標(biāo)簽制作，保證了可隨時(shí)添加，以及縱向排布
【小圓圈】
html標(biāo)簽好像沒有提供小圓圈標(biāo)簽，此處采用，div添加弧度角完成，，正方形的div添加弧度等于div的長（或者寬），就能夠?qū)崿F(xiàn)小圓圈。帶子就更簡單了，，div里直接添加文字即可
【文字】
文字要求緊跟小圓圈，，且與小圓圈保持同一水平高度，此處采用，position: absolute;設(shè)置top完成同一水平高度的布局
【動態(tài)效果】
前端的動態(tài)效果，不用說肯定由Javascript完成，，此處主要需要設(shè)置兩個(gè)事件即，
鼠標(biāo)移入事件onmouseover=”on_mous_move(‘info_name_1')”
鼠標(biāo)移出事件onmouseout=”on_mous_out(‘info_name_1')”
主要邏輯就是給文字前加入❤和前后的兩個(gè)空格，以及刪除加入內(nèi)容
【注意】
一個(gè)空格對于js來說其實(shí)是6個(gè)字符“ ；”，所以在切割的時(shí)候需要注意
。。。。就這么多，下面是實(shí)現(xiàn)的源碼
--------------------------------------------------------------------------------
二、實(shí)現(xiàn)源碼
源碼如下，僅供參考：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>一個(gè)好看的進(jìn)度頁面</title></head><body><style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } body { background: #f2f2f2; font: 12px/180% Arial, Helvetica, sans-serif, "新宋體"; } /* stepInfo */ .stepInfo { position: relative; background: #f2f2f2; margin: 80px auto auto 100px; height: 240px; } .stepInfo ul { /*float: left;*/ height: 100%; width: 0.6em; background: #45a0f3; } .stepIco { /*圓形顯示*/ border-radius: 1.4em; padding: 0.2em; background: #45a0f3; text-align: center; line-height: 1.4em; color: #fff; position: absolute; width: 1.4em; height: 1.4em; } .stepIco1 { left: -0.7em; top: -1%; } .stepIco2 { left: -0.7em; top: 50%; } .stepIco3 { left: -0.7em; top: 95%; } .stepText { color: #666; margin-top: 0.2em; width: 4em; text-align: center; margin-left: -1.4em; } .info { /*信息布局及顏色*/ position: absolute; font-size: large; color: black; margin: 0 0 0 25px; width: 200px; color: #45a0f3; } .info_1 { top: -1%; } .info_2 { top: 50%; } .info_3 { top: 95%; }</style><script type="text/javascript"> function on_mous_move(name) { var info = document.getElementsByName(name)[1]; var value = info.innerHTML; info.innerHTML = " ❤ " + value; var div_info = document.getElementsByName(name)[0]; div_info.style.backgroundColor = "#47009b"; } function on_mous_out(name) { var info = document.getElementsByName(name)[1]; var value = info.innerHTML; info.innerHTML = value.substr(13, value.length); var div_info = document.getElementsByName(name)[0]; div_info.style.backgroundColor = "#45a0f3"; }</script><div class="stepInfo"> <ul> <li></li> <li></li> </ul> <div class="stepIco stepIco1" name="info_name_1">1</div> <div class="info info_1" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')"> <strong name="info_name_1">打開冰箱</strong> </div> <div class="stepIco stepIco2" name="info_name_2">2</div> <div class="info info_2" onmouseover="on_mous_move('info_name_2')" onmouseout="on_mous_out('info_name_2')"> <strong name="info_name_2">把大象放進(jìn)去</strong> </div> <div class="stepIco stepIco3" name="info_name_3">3</div> <div class="info info_3" onmouseover="on_mous_move('info_name_3')" onmouseout="on_mous_out('info_name_3')"> <strong name="info_name_3">關(guān)上冰箱</strong> </div></div></body></html>總結(jié)
以上所述是小編給大家介紹的JS與HTML結(jié)合實(shí)現(xiàn)流程進(jìn)度展示條，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
新聞熱點(diǎn)
疑難解答
