1

このようなタイムライン アプリケーションを開発しています。

そのために、左右にスクロールする 2 つのボタンを作成しました。このコードを jQuery で書いたのですが、うまくいきません。

これが私のコードです：

<script>
        var ctx=document.getElementById('myCanvas').getContext('2d');       
        var years=1,hline =5;

    ctx.strokeStyle = "#7A7A52";    
    ctx.lineWidth = 1;

//Scale
ctx.fillStyle="white";
ctx.fillRect(0,150,1350,50);
var startYr=1890;
    do{
        ctx.beginPath();
        ctx.moveTo(hline,150);
        ctx.lineTo(hline,173);
        ctx.stroke();
            ctx.font = "12px Arial";
            ctx.fillStyle="#7A7A52";    
            ctx.fillText (startYr, hline-15, 190);  

        for (var i=0;i<10;i++)
        {
            ctx.moveTo(hline,150);
            ctx.lineTo(hline,160);
            ctx.stroke();
            hline = hline + 6;
        }
        years = years+10;
        startYr = startYr +10;
 }while(years<=1000);
//ScaleEnd
var i=0;
 $(".right").click(function(){
  $("#myCanvas").scrollLeft(i+=100);    
  });
 $(".left").click(function(){
  $("#myCanvas").scrollLeft(i-=100);    
  });

私のCSSコードは次のとおりです。

#myCanvas
    {
        background-color: #C2C2BB;
        margin-left: 180px;
        overflow: hidden;
    }

しかし、.right ボタンと .left ボタンはスクロールしません。私が間違っていることを教えてください！

4

1 に答える 1

0

まず、javascript コンソールでエラーを確認します。エラーが無ければOKです。第二に、コードをウェブ上のどこかに投稿して、テストできるようにすることができます。これは、あなたの質問に答えるのに役立ちます。</script>第三に、JavaScript コードを投稿したようですが、タグで閉じていません。そして最も重要な部分:私の意見では、あなたは間違っていると思います.canvas要素ですべてのアプリケーションをエコーし​​ないでください.timeline.jsのように、区切られたdivを使用してください. それははるかに簡単で良いでしょう。固定幅のメイン div を作成し、オーバーフローを none に設定して、そのメイン div に余分な div を配置してみてください。例えば：

<div id='timeline'> 
  <div id='first-event'></div>
  <div id='second-event'></div>
</div>

次に、jQuery 関数 scrollTo を使用して、メインの div を矢印でスクロールします。

于 2013-02-02T13:45:52.193 に答える