【HTML】仿淘宝五星评价显示任何分数
2015-08-23 22:51
543 查看
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单。
首先我们整理一下思路,这效果要怎么做出来,因为这个分数的原因,很容易让人联想到进度条,所以就想到了用遮罩来出来。做法很简单,灰色星星的图片放在下面,然后亮色星星的图片在上面,重叠两张图片,任何控制上面亮色的星星图片,根据分数显示它的长度,这样便能实现这个效果了。废话不多说,直接把代码贴上。
这是效果图
想要看五星打分的效果实现,看我的下一篇博客。
PS:这是五星显示和打分的源文件以及图片素材http://pan.baidu.com/s/1c0ruT3q
Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。
首先我们整理一下思路,这效果要怎么做出来,因为这个分数的原因,很容易让人联想到进度条,所以就想到了用遮罩来出来。做法很简单,灰色星星的图片放在下面,然后亮色星星的图片在上面,重叠两张图片,任何控制上面亮色的星星图片,根据分数显示它的长度,这样便能实现这个效果了。废话不多说,直接把代码贴上。
<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>
这是效果图
想要看五星打分的效果实现,看我的下一篇博客。
PS:这是五星显示和打分的源文件以及图片素材http://pan.baidu.com/s/1c0ruT3q
Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。
相关文章推荐
- 关于html中li的问题
- html事例
- html中将某个控件限制在框内的方法
- html使用笔记
- 最近的两个问题<input>与<frame src="/example/html/frame_a.html" name="showframe">
- html标记
- HTML标签,闭合还是不闭合?
- HTML-Ajax文件上传
- HTML中块级元素和行内元素
- html生成pdf
- HTML
- 使用HTML Purifier解决XSS问题
- html页面上轮播图片举例
- (HTML部分)特供.Net基础全套视频教程2014版(第十八天)(更新于2015年10月24日02:23:36)
- 对输入字符进行HTML转义 OR 去HTML标签
- html只允许输入的数据校验,只允许输入字母汉字数字等
- XHTML的使用规范
- html 标签
- html基础知识
- 有关Html页面节点的简单理解