js는 댓글 등에 적합한 간단한 별 선택기 제출 효과를 구현합니다. _javascript 기술

별 선택기, 제출 코드는 댓글 등에 적합합니다.

js 라이브러리를 사용하지 않고 별도의 js 코드입니다

코드 복사 코드는 다음과 같습니다.

star_level" star_width=" 14">

서비스

• 
  < ;input type="text" name="serve" value="" />
  


• 기본 수준

< ;li>1

• 2


• 3


• 4


• 5

< ;/ul>


가격



• 🎜>< ;input type="text" name="price" value="" title="여기서 2로 설정하면 기본적으로 별 2개가 밝아진다는 뜻입니다. " />
  


• 기본 수준


• 1




• 3
• 4


• < a href="#" title="별 5개 중 5개" class="five_stars">5





품질 ;




• 
  
  


• 기본 수준


• 1




• 3


• 4


• < href="#" title="별 5개 중 5개" class="five_stars">5

;input type="submit" value="제출 후 주소 표시줄의 매개변수를 확인하세요." />

코드 복사 코드는 다음과 같습니다.

复代码 代码如下:

body{font-size: 12px;}
ul{padding:0;margin:0;}
/*star.css*/
.star_ating {list-style:none;margin:-1px 0 0 -1px; 패딩:0; 너비:70px; 높이:12px; 위치:상대적; 배경:url(ating_stars.gif) 0 0 반복-x; 오버플로:숨김;글꼴 크기:0;}
.star_ating li{padding:0;margin:0;float:left;}
.star_rated li a{display:block;width:14px;height:12px ;텍스트 장식:없음;텍스트 들여쓰기:-9000px;z-색인:20;위치:절대;패딩:0;마진:0;}
.star_ating li a:hover{배경:url(ating_stars.gif ) 0 12px;z-index:2;왼쪽:0;}
.star_rated a.one_star{왼쪽:0;}
.star_ating a.one_star:hover{width:14px;}
.star_ating a.two_stars{왼쪽:14px;}
.star_rated a.two_stars:hover{너비:28px;}
.star_rated a. three_stars{왼쪽:28px;}
.star_ating a.two_stars:hover{ 너비:42px;}
.star_rated a.four_stars{왼쪽:42px;}
.star_ating a.four_stars:hover{너비:56px;}
.star_ating a.five_stars{왼쪽:56px;}
.star_ating a.five_stars:hover{width:70px;}
.star_rated li.current_ating{배경:url(ating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent :-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level{margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5픽셀 0;}