亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css定位實(shí)現(xiàn)星級(jí)展示沒有交互

kohoh_ / 3143人閱讀

摘要：效果如圖，通過定位放兩張背景圖，外層的放灰色的顆星圖，內(nèi)層的也是，寬度根據(jù)不同級(jí)別來展示，從而實(shí)現(xiàn)，代表半顆星，代表顆星，以此類推，即默認(rèn)比如顆星乘就是的后綴數(shù)字，以此可以動(dòng)態(tài)展示要注意這個(gè)星星默認(rèn)為，間距，展示的星星寬度記得計(jì)算間距。

<div class="star_evaluate">
       <span class="star star_10">span>
div>
.star_evaluate{
            position: relative;
            display: inline-block;
            width: 100px;
            height:16px;
            background: url("./../../public/img/star_gray.png") no-repeat;
            background-size:cover;
            overflow: hidden;
            .star{
              position: absolute;
              top:0;
              left:0;
              display: inline-block;
              height:16px;
              background: url("./../../public/img/star.png") no-repeat;
              background-size:cover;
              overflow: hidden;
            }
            .star_1{
              width:8px;
            }
            .star_2{
              width:21px;
            }
            .star_3{
              width:29px;
            }
            .star_4{
              width:42px;
            }
            .star_5{
              width:50px;
            }
            .star_6{
              width:63px;
            }
            .star_7{
              width:71px;
            }
            .star_8{
              width:84px;
            }
            .star_9{
              width:92px;
            }
            .star_10{
              width:100px;
            }
          }

效果如圖，通過定位放兩張背景圖，外層的放灰色的5顆星圖，內(nèi)層的也是，寬度根據(jù)不同級(jí)別來展示，從而實(shí)現(xiàn)，

star_1 ,代表半顆星，star_2 代表1顆星，以此類推，即默認(rèn)比如2.5顆星乘2就是class的后綴數(shù)字，以此可以動(dòng)態(tài)展示

要注意這個(gè)星星默認(rèn)為16px*16px，間距5px，展示的星星寬度記得計(jì)算間距。

之前看過網(wǎng)友的實(shí)現(xiàn)方式，有通過一個(gè)星星平鋪，來顯示的，但是平鋪的這種方式應(yīng)該是不可以讓星星之間產(chǎn)生間距的，如果有大神有辦法，請(qǐng)一定告訴我，謝謝！

如有寫的不對(duì)的地方，還請(qǐng)大家多多指正，感謝查看！

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1579.html

相關(guān)文章

  • 純CSS的星級(jí)評(píng)價(jià)效果

    摘要：代碼實(shí)現(xiàn)一星兩星三星四星五星去掉標(biāo)簽?zāi)J(rèn)樣式初始化樣式鼠標(biāo)懸浮精益求精上面我們的星星評(píng)分效果已初見成效，但是暴露了一個(gè)問題，就是我們的評(píng)價(jià)機(jī)制缺少記憶功能。這里有點(diǎn)不一樣的是每個(gè)星星對(duì)應(yīng)一個(gè)單選框和一個(gè)標(biāo)簽，的層級(jí)要高于單選框。 前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 這種星星評(píng)價(jià)效果，相信大家這個(gè)并不陌生...

    lijy91 評(píng)論0 收藏0

  • 純CSS的星級(jí)評(píng)價(jià)效果

    摘要：代碼實(shí)現(xiàn)一星兩星三星四星五星去掉標(biāo)簽?zāi)J(rèn)樣式初始化樣式鼠標(biāo)懸浮精益求精上面我們的星星評(píng)分效果已初見成效，但是暴露了一個(gè)問題，就是我們的評(píng)價(jià)機(jī)制缺少記憶功能。這里有點(diǎn)不一樣的是每個(gè)星星對(duì)應(yīng)一個(gè)單選框和一個(gè)標(biāo)簽，的層級(jí)要高于單選框。 前言 showImg(https://segmentfault.com/img/bVO4MF?w=122&h=23); 這種星星評(píng)價(jià)效果，相信大家這個(gè)并不陌生...

    Lin_R 評(píng)論0 收藏0

  • PokemonGo：LBS游戲開發(fā)

    摘要：優(yōu)化后的方案降低了捕捉門檻，也鼓勵(lì)用戶走動(dòng)去發(fā)現(xiàn)和捕捉更多精靈。 寫在前面 去吧！皮卡丘！小時(shí)候擁有一臺(tái)任天堂是多少熊孩子的夢(mèng)想，每個(gè)夜晚被窩里透出的微弱光線，把小小的童年帶入另一個(gè)世界，家門口的鳥和狗，森林里的蟲和瀑布，山洞里的超音蝠，帶著小小的夢(mèng)，走過一個(gè)個(gè)城市，一路冒險(xiǎn)，飛天潛水，攀瀑碎巖，所向披靡。每個(gè)醒來的清晨，都恍如出門冒險(xiǎn)的那天~ 要做什么 基于開放地圖二次開發(fā)，完成簡(jiǎn)易...

    daydream 評(píng)論0 收藏0

  • PokemonGo：LBS游戲開發(fā)

    摘要：優(yōu)化后的方案降低了捕捉門檻，也鼓勵(lì)用戶走動(dòng)去發(fā)現(xiàn)和捕捉更多精靈。 寫在前面 去吧！皮卡丘！小時(shí)候擁有一臺(tái)任天堂是多少熊孩子的夢(mèng)想，每個(gè)夜晚被窩里透出的微弱光線，把小小的童年帶入另一個(gè)世界，家門口的鳥和狗，森林里的蟲和瀑布，山洞里的超音蝠，帶著小小的夢(mèng)，走過一個(gè)個(gè)城市，一路冒險(xiǎn)，飛天潛水，攀瀑碎巖，所向披靡。每個(gè)醒來的清晨，都恍如出門冒險(xiǎn)的那天~ 要做什么 基于開放地圖二次開發(fā)，完成簡(jiǎn)易...

    Michael_Lin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<