1

我正在开发这样的时间线应用程序。

为此，我创建了两个按钮来左右滚动。我用 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 控制台是否有错误。如果没有任何错误，那就没关系。其次，您可以将您的代码发布到网络上的某个位置，以便我们对其进行测试。这将有助于我们回答您的问题。第三，我看到你已经发布了一个javascript代码，但是你没有用</script>标签关闭它。最重要的部分：在我看来你做错了，你不应该在画布元素上回显你的所有应用程序，尝试使用单独的 div，比如timeline.js。这会更容易和更好。尝试制作一个固定宽度的主 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 回答