【HTML】仿淘宝五星评价显示任何分数
来源:互联网 发布:sql语句单引号转义 编辑:程序博客网 时间:2024/04/30 02:47
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是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>
这是效果图
想要看五星打分的效果实现,看我的下一篇博客。
PS:这是五星显示和打分的源文件以及图片素材http://pan.baidu.com/s/1c0ruT3q
Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。
0 0
- 【HTML】仿淘宝五星评价显示任何分数
- 【jQuery】仿淘宝五星评价打分的实现
- 【jquery】优化仿淘宝五星评价打分(附注释)
- 五星评价
- 五星评价
- javascript五星评价效果(火狐显示不出效果)
- 仿淘宝实现多行星级评价
- 原生js五星评价
- 淘宝评价显示及记分规则
- 模仿淘宝评价的星级显示
- js实现仿淘宝商品评价的星级评定效果
- 基于BootStrap的仿淘宝星星商品评价案例
- 自定义Ratingbar(五星评价)
- 微信小程序开发-五星评价
- html+js+jquary完成的五星评分(评价效果demo)
- 仿淘宝输入框(JavaScript+html)
- UIUITableView仿淘宝的两列式cell显示
- 仿淘宝右侧导航栏显示隐藏
- 使用API-HOOK修改IAT的地址
- Wiki_Android_双击或多次点击事件
- JMS 学习 一
- gcc之静态库和动态库
- HDU1068Girls and Boys二分图最大匹配
- 【HTML】仿淘宝五星评价显示任何分数
- 索引
- for(i=0,j=0;i<10,j<10;i++,j++)用python怎么写
- 转载:PostgreSQL 内部概貌
- uPnp概述
- Android开源框架ViewPageIndicator和ViewPager实现Tab导航
- perl IO::Socket::INET模块
- 常用linux系统监控命令
- emacs-async库简要说明