1。方法1
1。写真を使用します
2。構造とスタイル
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> document </title> <style> ul {padding-left：0;オーバーフロー：隠し; } ul li {float：left;リストスタイル：なし;幅：27px;高さ：27px;背景：url（img/star.gif）} ul li a {display：block;幅：100％;パディングトップ：27px;オーバーフロー：隠し; } 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：; "> href = "javascript：;"> 4 </a> </li> <li> <a href = "javascript：;"> 5 </a> </li> </ul> </body> </html>ライトクラスが追加されると、明るい星になります。つまり、背景位置を変更し、中空の星を固体に変えることを意味します。したがって、JSが実装された場合、LIにライトクラス名を追加することです。
効果：
3。相互作用JS
<script> var num = finalnum = tempnum = 0; var lis = document.getelementsbytagname（ "li"）; // num：渡された照明星の数// finalnum：最終照明星の数// tempnum：中間値関数fnshow（num）{finalnum = num || tempnum; //渡されたnumが0である場合、finalnumは（var i = 0; i <lis.length; i ++）{lis [i] .classname = i <finalnum？ "light"： ""; //星を照らすことは、クラスをライトに追加するスタイル}}} for（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）; //渡された値は0です。オンマウスアウトが呼び出され、Tempnum値が変更されて星を点灯しますtempnum = this.index; }} </script>このデザインの重要なポイントは、ムーアウトすると、星を暗くするために値が保存されることです。初期は0です（0星が明るくなります。つまり、完全に暗いことを意味します）。マウスが去る限り、クリックしないと、すべての星が暗くなります。クリックイベントは、マウスオーバーとマウスアウトをトリガーします。したがって、クリックするときは、テンプナムを変更して、マウスが去るときに明るい星の数を決定します。この値は、次回クリックするまで維持されます。
最終的な効果：
2。方法2
1。写真を使用します
2。効果は次のとおりです
3.完全なコードは次のとおりです
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> of starof </title> <style> ul {padding：0; margin：0;} li {list-style：none;}/*star rating*/.scoremark {width：width; postion; .scoremark .Score {float：right;表示：ブロック;マージン：0 0 10px;フォントサイズ：18px;ラインハイト：22px; font-weight：bold;色：＃F70; } .scoremark .star {float：right;表示：ブロック;位置：相対;幅：116px;高さ：20px;背景：url（img/star.png）繰り返し0px -20px; } .scoremark .ystar {position：absolute;上：0;左：0;幅：116px;高さ：20px;背景：url（img/star.png）繰り返し0px 0px; } .scoremark .star ul {width：120px;高さ：20px;位置：絶対;上：0;左：0; } .scoremark .star ul：hover {background：url（img/star.png）no -repeat 0px -20px; } .scoremark .star li {float：left;幅：24px;高さ：20px; } .scoremark .star li a {display：block;幅：24px;高さ：20px;オーバーフロー：隠し;テキストインデント：-9999px;位置：絶対; z-index：5; } .scoremark .star li a：hover {background：url（img/star.png）no-repeat 0px 0px; z-index：3;左：0} .scoremark .star a.one-star {左：0; } .scoremark .star A.One-star：Hover {width：24px} .Scoremark .star A.Two-Stars {左：24px; } .scoremark .star A.Two-stars：Hover {width：48px} .scoremark .star a.three-stars {左：48px; } .scoremark .star a.three-stars：hover {width：72px} .scoremark .star a.four-stars {左：72px; } .scoremark .star A.four-stars：hover {width：96px} .scoremark .star a.five-stars {左：96px; } .scoremark .star A.Five-stars：Hover {width：120px; } .scoremark .tips {position：absolute;上：-28px;左：0;幅：40px;高さ：21px;色：＃333;ラインハイト：20px;パディング：0 0 5px 0;テキストアライグ：センター;背景：url（img/ico.png）繰り返し。 Z-Index：6;フォントサイズ：12px; } </style> <script src = "http://code.jquery.com/jquery-2.2.4.min.js" Integrity = "sha256-bbhdlvqf/xty9gja0dq3hiwqf8lacrtxzkrutelt444 =" bodous "> </</</</</</</</</</</</</</</</</</scriptin = id = "Scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javascript：void（0）" data-name = "very for"> 1 </a> </li> <li> <a href = "javascript：void（0） href = "javascript：void（0）" data-name = "more"> 3 </a> </li> <li> <a href = "javascript：void（0）" data-name = "better"> 4 </a> href = "javascript：void（0）" data-name = "very good"> 5 </a> </li> </ul> </span> <div style = "left：0px; display：none;"> </div> </div> //星の評価スタースコア（$（ "。スコアマーク"）; a "）。mouseenter（function（）{var txt = $（this）.attr（" data-name "）; var x = $（this）.parent（" li "）。 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> <ul> <ul> <lif = "javascript：void（0）" data-name = "very for"> 1 </a> href = "javascript：void（0）" data-name = "more"> 3 </a> </li> <li> <a href = "javascript：void（0）" data-name = "better"> 4 </a> href = "javascript：void（0）" data-name = "very good"> 5 </a> </li> </ul> </span> <div style = "left：0px; display：none;"> </div> </div>
原則の簡単な説明：主に多層背景のカバレッジ関係
まず、構造：下に2つの層があります。 1つはイスター、もう1つはULです。
4.1。 4つ星の評価効果を達成します
外側の層。スターは固定幅で、背景画像は中空の灰色の星です。
内部では、.ystarは明るい星を表し、その背景は固体黄色の星です。 4つの明るい星がある場合は、.ystarの幅を80％に設定します。 2錠は40％です。
4.2。マウスホバーで星を照らす効果を実現する
主にCSSを介して制御されます。キーは、Hoverを通じて達成されます。
UL：ホバーすると、中空の灰色の星の背景画像が追加されました。
A：ホバーすると、幅は最初の数星の幅になります。
このようにして、ホバーするとき、実際には4層の背景があります。たとえば、2番目の星を下から上にホバリングするとき、
.starダークスター100％幅。ystar明る星80幅ulダークスター100％幅。
4.3。マウスホバーディスプレイの先端
as jsのデータ名の実装を取得します。
上記は、JSの星評価関数を実装するための例コード（2つの方法）の詳細な内容です。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者はあなたに時間内に返信します。 Wulin Network Webサイトへのご支援ありがとうございます！