3

基本的な HTML Slider 要素があります。私が作りたいのは単純です - スライダーが一方の端にあるとき、単純な幸せそうな顔が出力されます。相手側の場合は単純な悲しそうな顔が出力されます。

私が望む重要なことは、アニメーションの一方の側から他方の側へのスムーズな移行があることです。そのため、笑顔の顔は、無関心とわずかな幸福/わずかな悲しみのさまざまな段階を経ます。

スライダーから出力される 1 から 10 の間の float があるとします。これは、表示された画像の「幸せ」に対応します。

この問題にどのように取り組みますか？私は検索とグーグルを試みましたが、良い結果はありませんでした。すべての技術が許容されます。特に、画像/アニメーションの保存方法に関心があります。

4

5 に答える 5

5

楽しみのために、昼食時に純粋な CSS (画像や JavaScript なし) で Webkit のみのバージョンを少し作りました。必ずしもこのアプローチをお勧めするわけではありませんが、試してみることに抵抗できませんでした。

これは非常に単純なアプローチです。スライダーの代わりにラジオ ボタンのグループを使用しました。これにより、:checked疑似クラスを使用して、選択した値に応じて口の色と形を変更できます。口の形は と だけで表しheightますborder-radius。例えば：

#feel-0:checked ~ #mouth {
    border-radius: 30px 30px 0 0;
    height: 20px;
    margin-top: -5px;
}

説明テキストは、選択したラジオ ボタンのラベル フィールドです。最初はすべてのラベルが非表示になっていますが、フィールドがチェックされると隣接するラベルが表示されます。

#happiness input:checked + label {
    visibility: visible;
}

矢印キーを使用して、選択されているフィールドを変更できます (視覚的にスライダーを左右に動かします)。これは、ラジオ グループの組み込みの動作です。

少し手を加えるだけで、これを適応させて、非 WebKit ブラウザーでのスライダーの見栄えを良くすることができます。ただし、一部の古いブラウザーでは動作が不安定になる場合があり、スライダーを左右にドラッグすることはできません。本番環境では、JavaScript スライダー (利用可能な多くのjQuery オプションの 1 つなど) を使用し、CSS 疑似クラス マジックを JS の散らばったものと少数のクラスに置き換えます。

于 2013-10-10T12:29:29.593 に答える
1

口のないpngの顔と、スライダーに沿った位置に基づいて切り替わるいくつかのトゥイーンの口をJavascriptで使用するだけです。ファイルを配列に格納し、時限関数から呼び出して面の位置を確認します。シンプルで軽量。

var mouthArray = new Array('frown','half_frown','half_smile','smile');
var face       = document.getElementById('face');
var faceLoc    = parseInt(face.style.left);
function changeMouth() {
 if(faceLoc<10)
  {theMouth.setAttribute('src',mouthArray[0]);}
 if(faceLoc>10,faceLoc<=19)
  {theMouth.setAttribute('src',mouthArray[1]);}
 if(faceLoc>20,faceLoc<=29)
  {theMouth.setAttribute('src',mouthArray[2]);}
 if(faceLoc>30,faceLoc<40)
  {theMouth.setAttribute('src',mouthArray[3]);} 
}

これらの線に沿ったものは、スライダーの長さに対して十分な反復が与えられた場合、適切に「滑らかな」効果が得られるはずです。

于 2013-10-08T16:55:20.717 に答える