-3

我想把这个： http: //livepipe.net/control/rating一个评级栏 CSS，我唯一的问题是 image.gif。任何人都可以帮助我吗？如果我尝试构建它，我会使用 gif 动画：在时间间隔内变化的圆圈，而不是当你点击它们时。如果有人可以上传示例或解释如何正确构建这种类型的 gif，将不胜感激。

http://livepipe.net/control/rating

4

2 回答 2

1

如果您查看该网页的来源，您会看到这是用于评级的图像。

它是一个单独的 .gif，没有动画。为了控制要显示的选择，他定义了一些 CSS 类，如下所示：

.rating_container a {  
    float:left;  
    display:block;  
    width:25px;  
    height:25px;  
    border:0;  
    background-image:url("/stylesheets/rating.gif");  
} 

.rating_container a.rating_off {  
    background-position:0 0px;  
} 

.rating_container a.rating_half {  
    background-position:0 -25px;  
} 

.rating_container a.rating_on {  
     background-position:0 -50px;  
 } 

.rating_container a.rating_selected {  
     background-position:0 -75px;  
}

<a>具有该类的元素中的每个标签rating_container都会自动将整个评分表设置为其背景图像。由于宽度/高度被强制为 25 x 25，它只会显示它的一小部分。然后，他<a>根据评分单独设置课程。例如，当评级设置为，<a class='rating_on'>匹配的 CSS 将图像背景位置在 y 轴上更改 -50px，这会导致 25x25<a>窗口显示不同的图片。

于 2012-10-05T08:42:47.740 回答
0

您不需要一张图片，而是多张图片：

  • 评级关闭
  • rating_half
  • rating_on
  • rating_selected

然后在未选择任何内容时显示 5 次 rating_off 选择 2 时显示 2 次 rating_on 和 3 次 rating_off ... 当您未完全选择选项时使用 rating_half ...

当用户将鼠标悬停在评级上时（在他选择之前）使用 rating_selected

您不需要任何动画 GIF

于 2012-10-05T08:28:50.833 回答