1. Method 1
1. Use pictures
2. Structure and style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: none; width: 27px; height: 27px; background: url(img/star.gif) } ul li a { display: block; width: 100%; padding-top: 27px; overflow: hidden; } ul li.light { background-position: 0 -29px; } </style></head><body> <ul> <li><a href="javascript:;">1</a></li> <li><a href="javascript:;">2</a></li> <li><a href="javascript:;">3</a></li> <li><a href="javascript:;">4</a></li> <li><a href="javascript:;">5</a></li> </ul></body></html>If the light class is added, it will become a bright star, which means changing the background position and turning the hollow star into a solid one. So when the js is implemented, it is to add a light class name to the li.
Effect:
3. Interaction js
<script>var num=finalnum = tempnum= 0;var lis = document.getElementsByTagName("li");//num: The number of lighted stars passed in //finalnum: The number of final lighted stars //tempnum: an intermediate value function fnShow(num) { finalnum= num || tempnum;//If the num passed in is 0, finalnum takes the value of tempnum for (var i = 0; i < lis.length; i++) { lis[i].className = i < finalnum? "light" : "";//Lighting up the stars is the style of adding class to light}}for (var i = 1; i <= lis.length; i++) { lis[i - 1].index = i; lis[i - 1].onmouseover = function() { //The mouse passes by and lights up the stars. fnShow(this.index);//The value passed in is positive, that is finalnum } lis[i - 1].onmouseout = function() { //The stars darken when the mouse leaves fnShow(0);//The value passed in is 0, finalnum is tempnum, the initial is 0 } lis[i - 1].onclick = function() { //The mouse clicks, and onmouseout will be called, and the tempnum value will be changed to light up the stars tempnum = this.index; }}</script>A key point of this design is that when mouout, a value is saved to make the stars dark. The initial is 0 (0 stars become brighter, which means it is completely dark). If you don’t click, as long as the mouse leaves, all stars will be dark. The click event will trigger a mouseover and a mouseout. Therefore, when clicking, change the tempnum to determine how many stars will be bright when the mouse leaves. This value will be maintained until the next time you click.
Final effect:
2. Method 2
1. Use pictures
2. The effect is as follows
3. The complete code is as follows
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo of starof</title> <style> ul{padding:0;margin: 0;} li{list-style: none;} /*Star rating*/ .scoremark{width:154px;position:relative;margin-top:50px;} .scoremark .score { float: right; display: block; margin: 0 0 0 10px; font-size: 18px; line-height: 22px; font-weight: bold; color: #f70; } .scoremark .star { float: right; display: block; position: relative; width: 116px; height: 20px; background: url(img/star.png) no-repeat 0px -20px; } .scoremark .ystar { position: absolute; top: 0; left: 0; width: 116px; height: 20px; background: url(img/star.png) no-repeat 0px 0px; } .scoremark .star ul { width: 120px; height: 20px; position: absolute; top: 0; left: 0; } .scoremark .star ul:hover { background: url(img/star.png) no-repeat 0px -20px; } .scoremark .star li { float: left; width: 24px; height: 20px; } .scoremark .star li a { display: block; width: 24px; height: 20px; overflow: hidden; text-indent: -9999px; position: absolute; z-index: 5; } .scoremark .star li a:hover { background: url(img/star.png) no-repeat 0px 0px; z-index: 3; left: 0 } .scoremark .star a.one-star { left: 0; } .scoremark .star a.one-star:hover { width: 24px } .scoremark .star a.two-stars { left: 24px; } .scoremark .star a.two-stars:hover { width: 48px } .scoremark .star a.three-stars { left: 48px; } .scoremark .star a.three-stars:hover { width: 72px } .scoremark .star a.four-stars { left: 72px; } .scoremark .star a.four-stars:hover { width: 96px } .scoremark .star a.five-stars { left: 96px; } .scoremark .star a.five-stars:hover { width: 120px; } .scoremark .tips { position: absolute; top: -28px; left: 0; width: 40px; height: 21px; color: #333; line-height: 20px; padding: 0 0 5px 0; text-align: center; background: url(img/ico.png) no-repeat; z-index: 6; font-size: 12px; } </style> <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crosorigin="anonymous"></script></head><body> <div id="scoremark"> <em>8.0</em> <span> <span></span> <ul> <li><a href="javascript:void(0)" data-name="very poor">1</a></li> <li><a href="javascript:void(0)" data-name="poor">2</a></li> <li><a href="javascript:void(0)" data-name="more">3</a></li> <li><a href="javascript:void(0)" data-name="better">4</a></li> <li><a href="javascript:void(0)" data-name="better">4</a></li> <li><a href="javascript:void(0)" data-name="very good">5</a></li> </ul> </span> <div style="left: 0px; display: none;"></div> </div><script>//Star rating starScore($(".scoremark"));function starScore(star){ star.find(".star ul li a").mouseenter(function(){ var txt = $(this).attr("data-name"); var x = $(this).parent("li").index(); star.find(".tips").html(txt).css("left",-6+x*24).show(); }); star.find(".star ul li a").mouseleave(function(){ star.find(".tips").html("").css("left",0).hide(); }); }</script></body></html>4. Principle
4.1html structure
<div id="scoremark"> <em>8.0</em> <span> <span></span> <ul> <li><a href="javascript:void(0)" data-name="very poor">1</a></li> <li><a href="javascript:void(0)" data-name="poor">2</a></li> <li><a href="javascript:void(0)" data-name="more">3</a></li> <li><a href="javascript:void(0)" data-name="better">4</a></li> <li><a href="javascript:void(0)" data-name="better">4</a></li> <li><a href="javascript:void(0)" data-name="very good">5</a></li> </ul> </span> <div style="left: 0px; display: none;"></div> </div>
A brief description of the principle: mainly the coverage relationship of multi-layer background
First of all, the structure: There are two layers below. One is ystar and the other is ul.
4.1. Achieve the rating effect of 4 stars
The outer layer.star is fixed width, and the background image is hollow gray stars.
Inside, .ystar represents the lit stars, and its background is solid yellow stars. If there are 4 bright stars, set the width of .ystar to 80%. 2 pills are 40%.
4.2. Realize the effect of lighting up the stars on the mouse hover
Mainly controlled through CSS. The key is achieved through:hover.
When ul:hover, a background image of hollow gray stars was added.
When a:hover, the width becomes the width of the first few stars.
In this way, when hover, there are actually 4 layers of backgrounds. For example, when hovering the second star, from bottom to top,
.star Dark Star 100% Width.ystar Bright Star 80 Width ul Dark Star 100% Width.two-stars 40% Width
4.3. Mouse hover display tip
Get the data-name implementation of a through js.
The above is the detailed content of the example code (two methods) for implementing the star rating function of JS introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply you in time. Thank you very much for your support for the Wulin Network website!