ホームページ > 記事 > ウェブフロントエンド > [HTML] 淘宝網の 5 つ星レビューを模倣し、任意のスコアを表示_html/css_WEB-ITnose
[HTML] 淘宝網の 5 つ星レビューを模倣し、任意のスコアを表示_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:111617ブラウズ
最近、あるプロジェクトで 5 つ星評価を達成しました。スコアが 4.3 点であれば 4.3 つ星が表示されます。やり方はとても簡単です。
まず、この効果を実現する方法について考えを整理しましょう。このスコアではプログレスバーが考えられやすいため、マスクを使用してそれを実現することを考えました。方法は非常に簡単で、灰色の星の絵を下に置き、次に明るい星の絵を上に置き、2つの絵を重ね、上の明るい星の絵を制御し、スコアに応じてその長さを表示することで、この効果を達成できます。 。何もせずに、コードを貼り付けるだけです。
<html><head><meta charset="utf-8"> <style type="text/css">#bg{ width: 60px; height: 16px; background: url("img/star_gray.png");}#over{ height:16px; background:url("img/star_org.png") no-repeat;}</style></head><body> <div id="bg"><!--这里是背景，也就是灰色的星星--> <!--说明，这里的width就是设置分数啦，以我写的为例，一个星星的长度是12px，也就是1分12px，如果是4.3分，就是4.3*12px = 51.6px的长度，当然这个一般是取得数据后用js或者其他模板语言去控制的--> <div id="over" style="width:51.6px"></div><!--这里是遮罩，设置宽度以达到评分的效果--> </div></body></html> これがレンダリングです
5 つ星評価の効果を確認したい場合は、私の次のブログを読んでください。
追記: これは 5 つ星の表示と評価のソース ファイルと画像素材です http://pan.baidu.com/s/1c0ruT3q
作者: Lili
サイン: 多すぎないでください人生には幻想がありますが、もっと行動があります。
著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。