之前看到大眾點評中有星級商戶這樣的標籤感到挺有意思的,就偷偷模仿了下。
其實,大眾點評的星級商戶的樣式並沒有用到什麼複雜的外掛程式,只靠css就能輕鬆的實現,並且可以動態的控制。好了,閒話不說了,先來看看怎麼來做吧。首先,我們需要一張,如下所示:
然後寫下我們所需的樣式
.item-rank-rst
.irr-star0
.irr-star05
.irr-star10
.irr-star15
.irr-star20
.irr-star25
.irr-star30
.irr-star35
.irr-star40
.irr-star05
.irr-star50
再在頁面上寫上我們要用的標籤,這裡我們用div
irr-star35
"' title=''>
這樣就能實現星級評分的效果,如下所示:
改效果的實現原理就是通過css來擷取部分來呈現。
vue實現星級評分
v for item in stararr class item span div export default computed var half this star onstar 半星 if half 0.5 灰色星星 while starclass.length 5 return starcl...
swift 實現星級評分
通過新增形式實現星級打分功能.建立兩個檢視,其中乙個新增灰色星星,另乙個新增橘色星星.橘色星星檢視覆蓋灰色星星檢視,通過修改橘色星星檢視的寬度實現評分的展現.建立乙個繼承於 uiview 的類,作為星級打分的顯示檢視 建立灰色星星檢視,並新增到父檢視.建立橘色星星檢視,新增到父檢視,保證橘色檢視覆蓋...
jquery實現星級評分效果
效果圖如下 很不好 li rating item rating title 不好 li rating item rating title 一般 li rating item rating title 好 li rating item rating title 很好 li ul titletext u...