HTML을 사용하여 Taobao와 같은 별 5개 리뷰 예제 만들기
- 零下一度원래의
- 2017-05-13 14:22:524928검색
최근 프로젝트에서 별점 5개를 받았습니다. 점수 표시는 소수점까지 정확해야 합니다. 즉, 점수가 4.3점이라면 별 4.3개가 표시되는 것입니다. 매우 간단합니다.
우선 이 효과를 어떻게 얻을 수 있을지에 대한 생각을 정리해보자. 이 점수 때문에 진행률 표시줄을 떠올리기 쉽기 때문에 마스크를 사용해보자고 생각했다. 그것을 달성하기 위해. 방법은 매우 간단합니다. 아래에 회색 별 그림을 배치하고 그 위에 밝은 별 그림을 놓고 위의 밝은 별 그림을 조정하여 길이를 표시합니다. 점수에 도달할 수 있는 효과가 있습니다. 더 이상 고민할 필요 없이 코드를 붙여넣기만 하면 됩니다.
<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>【관련 추천】특별 추천: "php 프로그래머 툴박스" V0.1 버전 다운로드
2.위 내용은 HTML을 사용하여 Taobao와 같은 별 5개 리뷰 예제 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.