-3

私はこれを置きたい: http://livepipe.net/control/rating評価バー CSS と私の唯一の問題は image.gif です。誰でもそれで私を助けることができますか？ビルドしようとすると、gif アニメーションが発生します。つまり、クリックしたときではなく、時間間隔で変化する円です。誰かが例をアップロードしたり、このタイプの gif を正しく作成する方法を説明したりできる場合は、大いに感謝します。

http://livepipe.net/control/rating

4

2 に答える 2

1

その Web ページのソースを見ると、これが評価に使用されている画像であることがわかります。

単一の .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

必要な画像は 1 つではなく、複数の画像です。

  • rating_off
  • rating_half
  • rating_on
  • rating_selected

次に、何も選択されていない場合は rating_off が 5 回表示され、2 が選択されている場合は rating_on が 2 回、rating_off が 3 回表示されます...オプションを完全に選択していない場合は、rating_half が使用されます...

rating_selected は、ユーザーが評価の上にカーソルを置いたときに使用されます (選択する前)。

アニメーションGIFは必要ありません

于 2012-10-05T08:28:50.833 に答える