利用HTML製作一個仿淘寶的五星評價實例
- 零下一度原創
- 2017-05-13 14:22:524972瀏覽
最近做項目做到一個五星評分的，這個分數的顯示，要精確到小數，就是如果分數是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>【相關推薦】
1. #特別推薦：「php程式設計師工具箱」V0.1版本下載
2. 免費html線上影片教學
以上是利用HTML製作一個仿淘寶的五星評價實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：全螢幕載入一個頁面的實例教程下一篇：全螢幕載入一個頁面的實例教程