因為只是做乙個demo，那就實現簡單的效果就可以：
1. 刻度區間[0，100]
2. 有倒三角標記，指示當前刻數
3. 使用者左右滑動刻度尺區域，能夠動態獲取倒三角指示的刻數
頁面其實很好繪製，乙個刻度文字節點和乙個包裹刻度尺的
容器。難點在於刻度尺的展示和倒三角的實現。
//html
div>//css樣式
#********
//html
id="ruler"
data-offset="0">
id="ruler-ul">
10span>
li>
20span>
li>
30span>
li>
//更多的刻度
ul>
div>
//css樣式
#ruler-container
#ruler
ul #ruler
ulli
ul元素的寬度盡量設定非常大，並將其父div的overflow屬性設定為hidden，保證列表項在一行上。
刻度線使用一張背景實現，設定background-size和background屬性，可以讓其達到合適的排列效果。同時需要float:left消除空隙。list-style:none也是必須的，不然會有預設的圓點。
至此，頁面的布局算是完成了。
實現滑動效果就是計算手指滑動距離，來設定#ruler的tansform：translatex（距離）樣式。
ruler.addeventlistener('touchstart', function
(event) );
rulerul.addeventlistener('touchmove', function (event)
}, false);
一時興起做了這個demo，簡單的實現了刻度尺滑動效果。但是也有一些問題：
因為浮點數精度問題會出現無法滑動到0或100的情況，因為此時已經滿足滑動事件中的if條件，後面的樣式修改等語句不會執行。
雖然使用了rem單位來處理不同裝置，但是因為刻度線使用了背景來實現，不同的裝置寬度下精度會受到影響。
我只是乙個學了3個月前端的新人，**中肯定還有很多我不知道的不規範的地方,，希望能幫我指出。
如果能幫到你，我將十分榮幸。
自製刻度尺外掛程式 前端簡易實現 騰訊信用 介面
這裡我參考了前輩的部落格 在前輩部落格中可以進行更深一步的學習 文件中給的解釋是 jquery.extend 函式主要是用於將乙個或多個物件的內容合併到目標物件上 該函式可以將乙個或多個物件的成員屬性和方法複製到指定的物件上。extend也是在我們寫外掛程式時常用的方法，extend param,d...
自製刻度尺外掛程式 前端簡易實現 騰訊信用 介面
這裡我參考了前輩的部落格 在前輩部落格中可以進行更深一步的學習 文件中給的解釋是 jquery.extend 函式主要是用於將乙個或多個物件的內容合併到目標物件上 該函式可以將乙個或多個物件的成員屬性和方法複製到指定的物件上。extend也是在我們寫外掛程式時常用的方法，extend param,d...
Html5實現移動端 PC端 刮刮卡效果
刮刮卡需求 每一位使用者有三次刮刮卡的機會 本次刮刮卡的結果會覆蓋上次的結果 刮刮卡的中獎機率呈現為遞增的曲線 保證三次中必須有一次中獎 刮出的結果包含按鈕既 領取獎品 or 再來一次 分享活動獎品公升級 這裡主要是微信分享的 了 我們自己的需求，今天就說怎麼製作刮刮卡，有這樣需求的可以找我要原始碼...