jQuery와 CSS를 사용하여 숫자 입력에서 별점 평점을 동적으로 생성하려면 어떻게 해야 합니까?

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

점수 표시 영역에서 숫자 값을 별점 평점으로 변환하는 것은 공통의 도전. jQuery와 CSS를 사용하여 숫자 입력을 기반으로 별 등급을 동적으로 생성하려면 어떻게 해야 할까요?

해결책:

여기 단일 이미지를 활용하고 CSS:

CSS

<br>span.stars,span.starsspan{</p>
<pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;

}

span.stars 스팬 {

background-position: 0 0;

}

이미지:

노란색 별표가 있는 단일 이미지(stars.png) 위쪽에는 회색 별이 있고 아래쪽에는 회색 별이 있습니다. 하단.

jQuery:

<br>$.fn.stars = function() {</p>
<pre class="brush:php;toolbar:false">return $(this).each(function() {
    var val = parseFloat($(this).html());
    var size = Math.max(0, (Math.min(5, val))) * 16;
    var $span = $('<span />').width(size);
    $(this).html($span);
});

}

HTML:

<br><span> <스팬 class="stars">2.6545344</span><br><span><span class="stars">8</span><br>

사용법:

<br>$(함수 () {</p>
<pre class="brush:php;toolbar:false">$('span.stars').stars();

});

출력:

이 솔루션은 CSS 스프라이트를 사용하여 노란색과 노란색을 결합합니다. 회색 별과 회색 별을 하나의 이미지로 통합하여 노란색 별의 너비를 제어하여 원하는 이미지를 표현할 수 있습니다. 등급.

장점:

• 간단하고 가볍습니다.
• 분수 별점을 지원합니다.
• 별의 모양을 제어하는 ​​CSS입니다.

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