1. 방법 1
1. 사진을 사용하십시오
2. 구조와 스타일
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> <style> ul {padding-left : 0; 오버플로 : 숨겨진; } ul li {float : 왼쪽; 목록 스타일 : 없음; 너비 : 27px; 높이 : 27px; 배경 : url (img/star.gif)} ul li a {display : block; 너비 : 100%; 패딩 탑 : 27px; 오버플로 : 숨겨진; } ul li.light {배경 위치 : 0 -29px; . href = "javaScript :;"> 4 </a> </li> <li> <a href = "javaScript :;"> 5 </a> </li> </ul> </body> </html>라이트 클래스가 추가되면 밝은 별이되어 배경 위치를 바꾸고 중공 별을 단단한별로 바꾸는 것을 의미합니다. 따라서 JS가 구현되면 LI에 경량 클래스 이름을 추가해야합니다.
효과:
3. 상호 작용 js
<cript> var num = finalnum = tempnum = 0; var lis = docut tempnum; // 통과 된 NUM이 0이면 FinalNum은 (var i = 0; i <lis.length; i ++) {lis [i] .classname = i <finalnum? "light": ""; // 별을 밝히는 것은 (var i = 1; i <= lis.length; i ++) {lis [i -1] .index = i; lis [i -1] .onmouseover = function () {// 마우스가지나 가서 별을 밝힙니다. fnshow (this.index); // 전달 된 값은 긍정적이며, 그것은 finalnum} lis [i -1] .onmouseout = function () {// 마우스가 fnshow (0)을 떠날 때 별이 어두워집니다. OnmouseOut이 호출되고 Tempnum 값이 변경되어 별 Tempnum = this.index; }} </script>이 디자인의 핵심 요점은 Mouout 일 때 별을 어둡게하기 위해 값이 저장된다는 것입니다. 초기는 0입니다 (별 0 별은 더 밝아 지므로 완전히 어두워집니다). 마우스가 떠나는 한 클릭하지 않으면 모든 별이 어두워집니다. 클릭 이벤트는 마우스 오버와 마우스 아웃을 트리거합니다. 따라서 클릭 할 때 템스 텀을 변경하여 마우스가 떠날 때 별이 얼마나 밝아 지는지 결정하십시오. 이 값은 다음에 클릭 할 때까지 유지됩니다.
최종 효과 :
2. 방법 2
1. 사진을 사용하십시오
2. 효과는 다음과 같습니다
3. 전체 코드는 다음과 같습니다
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> starof </title> <style> ul {padding : 0; margin : 0;} li {listyle : none;}/*별 등급*/.Scoremark {154px; .Scoremark .Score {float : 오른쪽; 디스플레이 : 블록; 마진 : 0 0 10px; 글꼴 크기 : 18px; 라인 높이 : 22px; 글꼴 중량 : 대담한; 색상 : #F70; } .scoremark .star {float : right; 디스플레이 : 블록; 위치 : 상대; 너비 : 116px; 높이 : 20px; 배경 : URL (img/star.png) no -Repeat 0px -20px; } .Scoremark .ystar {위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 116px; 높이 : 20px; 배경 : URL (img/star.png) No-Repeat 0px 0px; } .Scoremark .Star ul {너비 : 120px; 높이 : 20px; 위치 : 절대; 상단 : 0; 왼쪽 : 0; } .Scoremark .Star UL : 호버 {배경 : url (img/star.png) no -Repeat 0px -20px; } .Scoremark .star li {float : 왼쪽; 너비 : 24px; 높이 : 20px; } .Scoremark .star li a {display : block; 너비 : 24px; 높이 : 20px; 오버플로 : 숨겨진; 텍스트 안정 : -9999px; 위치 : 절대; Z- 인덱스 : 5; } .Scoremark .Star li A : 호버 {배경 : url (img/star.png) no-Repeat 0px 0px; Z- 인덱스 : 3; 왼쪽 : 0} .Scoremark .Star A.One-star {왼쪽 : 0; } .Scoremark .Star A.One-star : 호버 {너비 : 24px} .Scoremark .Star A.Two-Star {왼쪽 : 24px; } .Scoremark .Star A.Two-Stars : 호버 {width : 48px} .Scoremark .Star A.three-Stars {왼쪽 : 48px; } .Scoremark .Star A.three-stars : 호버 {width : 72px} .Scoremark .Star A.Four-Stars {왼쪽 : 72px; } .Scoremark .Star A.Four-Stars : 호버 {width : 96px} .Scoremark .Star A.Five-Stars {왼쪽 : 96px; } .Scoremark .Star A.Five-Stars : 호버 {너비 : 120px; } .scoremark .tips {위치 : 절대; 상단 : -28px; 왼쪽 : 0; 너비 : 40px; 높이 : 21px; 색상 : #333; 라인 높이 : 20px; 패딩 : 0 0 5px 0; 텍스트 정렬 : 센터; 배경 : URL (img/ico.png) No-Repeat; Z- 인덱스 : 6; 글꼴 크기 : 12px; } </style> <script src = "http://code.jquery.com/jquery-2.2.4.min.js"intervity = "sha256-bhdlvqf/xty9gja0dq3hiwqf8lacrtxxzkrutelt44 ="crosorigin = </script> </head> id = "skoremark"> <em> 8.0 </em> <span> <span> <span> </span> <ul> <li> <a href = "javaScript : void (0)"data-name = "revery low"> 1 </a> <li> <a href = "javaScript : void (0)" "data-name ="poor "> href = "javaScript : void (0)"data-name = "more"> 3 </a> </a> </li> <li> <a href = "javaScript : void (0)"data-name = "better"> 4 </a> <li> <a href = "javaScript : void (0)"data-name = "better" "</li >> href = "javaScript : void (0)"data-name = "revery good"> 5 </a> </a> </li> </ul> </span> <div style = "왼쪽 : 0px; display : none;"> ">"> </div> </div> <cript> // Starscore ($ ($ ( ". scoremark"); A "). MouseEnter (function () {var txt = $ (this) .attr ("data-name "); var x = $ (this) .parent ("li "). index (); star.find (". tips ") .css ("왼쪽 ", -6+x*24); show ()); star.find ( ". Star ul li a"). mouseleave (function () {star.find ( ". tips"). html ( ""). css ( "left", 0) .hide ();}); } </script> </body> </html>4. 원리
4.1html 구조
<div id = "scoreMark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javaScript : void (0)"data-name = "very bron"> 1 </a> <li> <a href = "javaScript : void (0)"</li>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> <li> <li> href = "javaScript : void (0)"data-name = "more"> 3 </a> </a> </li> <li> <a href = "javaScript : void (0)"data-name = "better"> 4 </a> <li> <a href = "javaScript : void (0)"data-name = "better" "</li >> href = "javaScript : void (0)"data-name = "revery good"> 5 </a> </a> </li> </ul> </span> <div style = "왼쪽 : 0px; display : none;"> </div> </div>
원리에 대한 간단한 설명 : 주로 다층 배경의 적용 범위 관계
우선, 구조 : 아래에는 두 개의 레이어가 있습니다. 하나는 ystar이고 다른 하나는 ul입니다.
4.1. 별 4 개 등급 효과를 달성하십시오
외부 레이어는 고정 너비이며 배경 이미지는 중공 회색 별입니다.
내부, .ystar는 빛의 별을 나타내며 배경은 단단한 노란 별입니다. 밝은 별 4 개가 있으면 .ystar의 너비를 80%로 설정하십시오. 2 개의 알약은 40%입니다.
4.2. 마우스 호버에 별을 조명하는 효과를 실현하십시오.
주로 CSS를 통해 제어됩니다. 키는 다음을 통해 달성됩니다.
UL : 호버 일 때, 중공 회색 별의 배경 이미지가 추가되었습니다.
A : 호버링되면 너비는 처음 몇 개의 별의 너비가됩니다.
이런 식으로, 호버링되면 실제로 4 층의 배경이 있습니다. 예를 들어, 두 번째 별을 맨 아래에서 상단으로 마우기 할 때
.Star Dark Star 100% 너비. Ystar Bright Star 80 너비 UL Dark Star 100% 너비. Two-Stars 40% 너비
4.3. 마우스 호버 디스플레이 팁
js의 데이터 이름 구현을 얻으십시오.
위의 것은 소개 된 JS의 별 등급 함수를 구현하기위한 예제 코드 (두 가지 방법)의 자세한 내용입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 답장을 드릴 것입니다. Wulin Network 웹 사이트를 지원해 주셔서 대단히 감사합니다!