純CSS的星級評價效果

weixin_33766168發表於2017-06-13
CSS

前言

圖片描述

這種星星評價效果，相信大家這個並不陌生，經常會遇到這個。現在如果要我們自己實現一個，很多人第一反應可能用JS+CSS去實現它。這種方式並沒有什麼不好的地方，只是我們在複用的時候不是很方便，需要帶上JS和CSS的兩塊程式碼。為了複用更簡單，所以我們介紹一種純CSS的方式。

小試牛刀

素材

icon-star-default.pngicon-star-active.png

原理

這裡我們分為兩層：
第一層：div.star_evaluate 設定圖片背景icon-star-default.png，沿X軸平鋪，超出部分隱藏，作為定位父級。
第二層：a標籤作為第二層，這裡我們需要設定其定位屬性，初始化設定好每個a標籤的位置，以及其背景圖片。這邊需要注意的是一定要給a便籤加上層級。

滑鼠移動對應的星星時，將其left屬性設定為0，然後設定其寬度，這個寬度由其對應的星級決定，最後別忘了設定其層級。

關於層級的設定，我們一定要保證div.star_evaluate<a:hover<a。

程式碼實現

HTML

<div class="star_evaluate">
    <a class="star star_1" href="javascript:;" title="一星"></a>
    <a class="star star_2" href="javascript:;" title="兩星"></a>
    <a class="star star_3" href="javascript:;" title="三星"></a>
    <a class="star star_4" href="javascript:;" title="四星"></a>
    <a class="star star_5" href="javascript:;" title="五星"></a>
</div>

CSS

/*去掉標籤預設樣式*/
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*初始化樣式*/
.star_evaluate {
    position: relative;
    width: 100px;
    height: 20px;
    background: url("icon-star-default.png") repeat-x;
    background-size: 20px 20px;
    overflow: hidden;
}

.star {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 2;
}

.star_1 {
    left: 0;
}

.star_2 {
    left: 20px;
}

.star_3 {
    left: 40px;
}

.star_4 {
    left: 60px;
}

.star_5 {
    left: 80px;
}

/*滑鼠懸浮*/
.star:hover {
    cursor: pointer;
    background: url("icon-star-active.png") repeat-x;
    background-size: 20px 20px;
    left: 0;
    z-index: 1;
}

.star_1:hover {
    width: 20px;
}

.star_2:hover {
    width: 40px;
}

.star_3:hover {
    width: 60px;
}

.star_4:hover {
    width: 80px;
}

.star_5:hover {
    width: 100px;
}

精益求精

上面我們的星星評分效果已初見成效，但是暴露了一個問題，就是我們的評價機制缺少記憶功能。接下來我們來優化一下。

素材

同上。

實現原理

這邊我們實現星星評分記憶的功能主要依賴input[type=radio]單選框,我們的星星評分主要分為三個狀態。
初始化狀態：在初始化狀態下，我們需要跟上面一樣初始化星星的位置。這裡有點不一樣的是每個星星對應一個單選框和一個label標籤，label的層級要高於單選框。另外我們通過label的for的屬性來實現和單選框的聯絡。
懸浮狀態：在懸浮狀態下，我們要根據懸浮所對應的星星來設定label標籤的寬度，left屬性設定為0。此時我們要保證該懸浮狀態下的label標籤的層級低於其他label標籤。
選中狀態：在選中狀態下，我們跟懸浮狀態一樣設定label標籤的寬度。

程式碼實現

HTML


<form id="score_form">
    <div class="star_evaluate">
        <input type="radio" id="scoreId_1" class="score score_1" name="score" value="1"/>
        <label for="scoreId_1" class="star star_1"></label>
        <input type="radio" id="scoreId_2" class="score score_2" name="score" value="2"/>
        <label for="scoreId_2" class="star star_2"></label>
        <input type="radio" id="scoreId_3" class="score score_3" name="score" value="3"/>
        <label for="scoreId_3" class="star star_3"></label>
        <input type="radio" id="scoreId_4" class="score score_4" name="score" value="4"/>
        <label for="scoreId_4" class="star star_4"></label>
        <input type="radio" id="scoreId_5" class="score score_5" name="score" value="5"/>
        <label for="scoreId_5" class="star star_5"></label>
    </div>
</form>

CSS3

        /*去掉標籤預設樣式*/
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        input {
            margin: 0;
        }

        /*初始化樣式*/
        .star_evaluate {
            position: relative;
            width: 100px;
            height: 20px;
            background: url("icon-star-default.png") repeat-x;
            background-size: 20px 20px;
            overflow: hidden;
        }

        .star,.score{
            display: block;
            height: 20px;
            width: 20px;
            position: absolute;
        }
        .star{
            z-index: 2;
        }
        .score{
            opacity: 0;
        }

        .star_1, .score_1 {
            left: 0;
        }

        .star_2, .score_2 {
            left: 20px;
        }

        .star_3, .score_3 {
            left: 40px;
        }

        .star_4, .score_4 {
            left: 60px;
        }

        .star_5, .score_5 {
            left: 80px;
        }

        /*滑鼠懸浮*/
        .star:hover {
            cursor: pointer;
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
            z-index: 1;
        }

        .star_1:hover {
            width: 20px;
        }

        .star_2:hover {
            width: 40px;
        }

        .star_3:hover {
            width: 60px;
        }

        .star_4:hover {
            width: 80px;
        }

        .star_5:hover {
            width: 100px;
        }

        /*選中之後*/
        .score:checked + .star {
            background: url("icon-star-active.png") repeat-x;
            background-size: 20px 20px;
            left: 0;
        }

        .score_1:checked + .star_1 {
            width: 20px;
        }

        .score_2:checked + .star_2 {
            width: 40px;
        }

        .score_3:checked + .star_3 {
            width: 60px;
        }

        .score_4:checked + .star_4 {
            width: 80px;
        }

        .score_5:checked + .star_5 {
            width: 100px;
        }

相關文章