0

高さ500px、幅50pxのjpgがあります。これは 10 個の 50px x 50px の正方形で構成され、それぞれに 1 から 10 までの数字 (画像の上部に 1、下部に 10) が含まれます。(jpg はこちら: http://i39.tinypic.com/mmq4x5.jpg )

次に、オーバーフローが非表示に設定されたページに 50x50 のコンテナー div があります。この中に、前述の画像を背景として含む高さ 500 x 幅 50 の div があります。

訪問者が div をクリックするたびに、jquery animate を使用して内側の div を 50 ピクセル上にスクロールします (内側の div の CSS の上部から 50 ピクセルを削除します)。これにより、スムーズなスクロール カウンターの効果が得られます。

10に達したときに1にスムーズにスクロールできるようにする方法がわからないことを除けば、すべてうまく機能します（IE：divが10をクリックすると、数字の10が上にスクロールして置き換えられるようにラップアラウンドします上にスクロールするグラフィックの上から番号 1)。一番上の位置をテストできることはわかっています。正しい場所にある場合は、0pxにリセットするだけですが、ラップアラウンドではなく、1に「ジャンプ」します。jpg の長さを逆にスクロールして 1 に戻ることもできますが、それは私が望む効果ではありません。1 から 10 へ、そして再び 1 へと続く連続したカウンターのように見せたいのです。

ここに jsFiddle があります: http://jsfiddle.net/ChrisJones/zTBYe/2/

誰でもこれを行う方法を考えられますか???

参考までに、完全なコードは次のとおりです。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
    #slider{
     width:50px;
     height:500px;
     background: url(numstrip.jpg) no-repeat;
     position:relative;
     top:0px;
    }
    #wrapper{
     width:50px;
     height:50px;
     position:fixed;
     overflow:hidden;
     }
</style>
</head>
<body>
Div is below
<br>
<br>
<div id="wrapper">
    <div id="slider"></div>
</div>
<script type="text/javascript">
 $(document).ready(function () {
     $('#slider').click(function () {
         topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });
 });
</script>
</body>
</html>
4

2 に答える 2

0

カウンターのみを追加して確認しました。

 $(document).ready(function () {
     var counter = 1;
     $('#slider').click(function () {
         if(counter == 10)
             topPos = 0;
         else
             topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
         counter++;
     });
 });

フィドルを更新しました。ここにあります。

http://jsfiddle.net/zTBYe/3/

于 2013-09-18T14:54:32.827 に答える
0

これを試してください、これはあなたを助けます

    $('#slider').click(function () {
        if($(this).css("top")=='-450px')
            topPos = parseInt($(this).css("top")) + 450;
else
    topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });

フィドルhere

于 2013-09-18T15:06:41.467 に答える