별점 기능을 만드는 것은 어렵지 않지만 CSS를 사용하여 간단하게 작성하는 것은 약간 어렵습니다. 먼저 스크린샷을 찍어 보겠습니다.
효과는 매우 간단합니다. 어쩌면 이미 마음속에 구현하려는 아이디어가 있을 수도 있습니다. 일반적인 구현 방법을 살펴보겠습니다.
CSS:
암호
.jsstar
{ 목록 스타일: 없음;
여백: 0px;
패딩: 0px;
너비: 100px;
높이: 20px;
위치: 상대;
}
.jsstarli
{
패딩:0px;
여백: 0px;
플로트: 왼쪽;
너비:20px;
높이:20px;
배경:url(star_ating.gif) 0 0 반복 없음;
}
HTML:
<p>자바스크립트 + CSS 구현</p>
<ul class="jsstar">
<li title="별 하나"></li>
<li title="별 두 개"></li>
<li title="삼성"></li>
<li title="별 4개"></li>
<li title="별 다섯개"></li>
</ul>
JS: (저는 jquery를 사용합니다)
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<스크립트 유형="텍스트/자바스크립트">
$(문서).ready(함수(){
$(".jsstar >li").hover(
function(){$(this).css({"배경 위치":"왼쪽 하단"}).prev().trigger("mouseover")},
function(){$(this).css({"배경 위치":"왼쪽 상단"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("제목"))});
});
</script>
렌더링은 다음과 같습니다.
위와 다르지 않은데 사용자가 자바스크립트를 비활성화하면 그 효과는 매우 비참하지 않을까요?
그래서 우리는 그것을 구현하기 위해 순수한 CSS를 사용하려고 생각했습니다. 코드는 다음과 같습니다.
CSS:
암호
1 /*CSS 스타 시작*/
2.별점
3 {
4 목록 스타일: 없음;
5 여백: 0px;
6 패딩: 0px;
7 너비: 100px;
8 높이: 20px;
9 위치: 상대;
10 배경: url(star_ating.gif) 왼쪽 상단 반복-x;
11 }
12.별점 평가li
13 {
14 패딩: 0px;
15 여백: 0px;
16 플로트: 왼쪽;
17}
18.별점 평가 li a
19 {
20 디스플레이: 블록;
21 너비: 20px;
22 높이: 20px;
23 텍스트 장식: 없음;
24 텍스트 들여쓰기: -9000px;
25 z-인덱스: 20;
26 위치: 절대;
27 패딩: 0px;
28 }
29 .별점 평가 li a:hover
30 {
31 배경: url(star_ating.gif) 왼쪽 하단;
32 z-인덱스: 1;
33 왼쪽: 0px;
34}
35.별 등급 a.별 1개
36 {
37 왼쪽: 0px;
38 }
39.별점 평가 a.별 1개:호버
40 {
41 너비: 20px;
42 }
43.별점 평점 a.별 두 개
44 {
왼쪽 45개: 20px;
46 }
47.별점 평점 a.별 두 개:호버
48 {
49 너비: 40px;
50 }
51.별점 a.별 3개:호버
52 {
53 너비: 60px;
54 }
55.별점 a.별 3개
56 {
왼쪽 57개: 40px;
58 }
59.별점 평점 a.별 4개
60 {
61개 왼쪽: 60px;
62 }
63.별 등급 a.별 4개:hover
64 {
65 너비: 80px;
66 }
67.별점 평점 a.별 5개
68 {
69 왼쪽: 80px;
70}
71.별점 평점 a.별 5개:호버
72 {
73 너비: 100px;
74
75 }
HTML:
<ul class='별점 평가'>
<li><a href='#' title='One Star' class='one-star'>1</a></li>
<li><a href='#' title='two stars' class='two-stars'>2</a></li>
<li><a href='#' title='삼성' class=' three-stars'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
위의 CSS 줄 번호를 보면 이렇게 간단한 효과에 너무 많은 코드가 필요하다는 사실에 충격을 받으셨나요? 제 생각에는 JS를 사용하지 않고도 하나의 효과와 하나의 스타일만 가질 수 있다고 생각합니다. 더 간단하고 눈부신 효과가 있다면 알려주세요!