5

そこで、昔ながらのローロデックス スタイルの時計の非常に小さなデモを作成しました。グラフィックは景品の PSD からのもので、setInterval() を使用して時計機能を構築しました。ここでライブデモをチェックできます。

私がやろうとしているのは、数字の変化をアニメーション化して、上部が「反転」して新しい数字を表示することです。どうすればいいのか、私は間違いなく迷っています.bg画像を使用することもできますが、ストレートなHTMLの数字の方がユーザーフレンドリーだと思います. 誰かが私を正しい方向に向けることができますか? 私が得られる助けがあれば幸いです...下にプレビュー画像も含めて、私が何を構築しているかを理解できるようにします。

また、私は CSS3 ソリューションを試すことにオープンですが、これまで jQuery よりもうまく機能するものを見つけていません。

jquery 時計プレビュー

4

1 に答える 1

1

これは答えの半分に過ぎないことを認めます。CSS/JQueryを使用してローリング効果をアニメーション化する方法を示しています。

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="transformjs.1.0.beta.2.min.js"></script>
<style>
body {font-size:128px;}
</style>
<script>
$(function(){  //OnInit

$('.anim').click(function() {
  $(this).animate({    rotateX: '-='+(Math.PI/2),  },500,"",
    function(){ //OnComplete
    var n=(parseInt($(this).html())+1)%10;  //Turn 7 into 8, etc.
    $(this).html(n.toString());    //Update number while it is hidden
    $(this).animate({    rotateX: '+='+(Math.PI/2)  },500); //Rotate it back
    }
  );    
});  


});
</script>
</head>
<body>

<div class="anim" style="float:left">1</div><div class="anim" style="float:left">2</div><div class="anim" style="float:left">3</div>
</body>
</html>

JQuery 1.5.1+と、ここからダウンロードできるtransformjsライブラリが必要です。各番号をクリックして回転させます。Firefox11およびChromium17でテスト済み。transform.jsは、古いブラウザとIEで機能する何かを実行する必要があります。

ところで、クロスブラウザの課題について言えば、私はもともと<span>sに3つの数字を持っていました。これはFirefoxで機能しますが、Chromeはそれらをアニメーション化しません！したがって、。を使用した<div>sへの変更float:left。

私が言ったように、それはまだフリップカードのようには見えないので、それは解決策の半分にすぎません。これは、少しマスキングして、番号の上に一時的なdivを作成することで実行できると思います（実際のdivには次の番号があり、前の番号はその一時的なdivにあります）。しかし、時間がなくなる前にそれを機能させることができませんでした。

それでも投稿する価値があると思いました。いくつかの本当に曲がりくねった効果のために、アニメーションのrotateXの横にrotateYとrotateZを追加してみてください。

于 2012-04-19T01:36:41.240 に答える