好吧,假设电影/餐厅的平均评分是 4.3。在显示页面上,您有对象的名称、描述、联系方式、图像等……然后您可以看到以星级表示的平均评分。在对象的模型中,您存储每个用户的评分,并使用简单的数学公式计算平均值。但是我很好奇的是他们怎么表示4.3也就是4星比4.5少一点呢?存了50张png图片是不是太多了?提前致谢。
最佳答案
其实比看起来要简单得多。想象一下,两个元素相互堆叠:
- 一排金星
- 一排灰色星星
然后,使用一个简单的图像 mask ,您可以在 js
中计算 golden star
层的相对宽度。
更详细地说,他们实际上使用 Sprite 作为基础:
调整宽度值,您会看到完整的效果:
document.querySelector(".one .gold").style.width = "83.5%";
document.querySelector(".two .gold").style.width = "56%";
div{position:relative;height:12px;margin-bottom:10px;width: 140px;
background:url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png')0 -28px;
}
span{
position: absolute;
top: 0;
left: 0;
height: 12px;
background-image: url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png');
}
.gold{background-position: 0 -42px;}
<div class="one">
<span class="gold"></span>
</div>
<div class="two">
<span class="gold"></span>
</div>
关于javascript - 它们如何代表电影在 imdb、烂番茄上的平均评分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43527687/