js는 댓글 등에 적합한 간단한 별 선택기 제출 효과를 구현합니다. _javascript 기술
- WBOY원래의
- 2016-05-16 17:19:38933검색
별 선택기, 제출 코드는 댓글 등에 적합합니다.
js 라이브러리를 사용하지 않고 별도의 js 코드입니다 
코드 복사 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
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;}
复代码 代码如下:
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;}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.