jQuery와 CSS를 사용하여 숫자를 별점 평점으로 변환하려면 어떻게 해야 합니까?

jQuery와 CSS를 사용하여 어떤 숫자든 별표 평점 표시로 변환

숫자 값으로 별표 평점 표시를 만들면 웹사이트와 애플리케이션의 점수와 제품 등급을 검토합니다. 이 작업은 jQuery와 CSS의 조합을 사용하여 단순화할 수 있습니다.

jQuery와 CSS 구현

솔루션에는 단일 CSS 이미지와 자동 생성된 범위를 활용하는 것이 포함됩니다. 요소:

CSS

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

이미지

참고:stars.png 이미지를 자신의 서버에 복사하고 그것을 사용

jQuery

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value and ensure it is within 0-5 range
        var val = parseFloat($(this).html());
        val = Math.max(0, (Math.min(5, val)));
        // Calculate star width and create a span holder
        var size = val * 16;
        var $span = $('<span></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML

<span></span>

사용방법

$(function() {
    $('span.stars').stars();
});

맞춤화

하기 별을 절반 또는 1/4 별 크기로 제한하려면 다음과 같이 JavaScript 코드를 수정하십시오.

• 반 별: val = Math.round(val * 2) / 2;
• 분기 별: val = Math.round(val * 4) / 4;

설명

스크립트는 별 스프라이트의 배경 이미지로 중첩된 범위 요소를 생성합니다. 외부 범위에는 회색 별이 포함되어 있고 내부 범위에는 노란색 별이 포함되어 있습니다. 내부 스팬의 너비를 조정하면 노란색 별이 회색 별의 적절한 수를 나타냅니다.

접근성 고려 사항

내부에 숫자 값을 숨겨 접근성을 향상시킬 수 있습니다. text-indent: -9999px;를 사용하여 내부 범위를 보조 기술에 사용할 수 있도록 보장합니다.

위 내용은 jQuery와 CSS를 사용하여 숫자를 별점 평점으로 변환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!