Question

我正在开发一个时间轴应用程序like this。

为此，我创建了两个按钮来向左和向右滚动。我在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按钮不滚动。请建议我，我做错了！

Answer 1

首先查看你的javascript控制台是否有错误。如果没有任何错误，那就没关系。其次，您可以在网络上的某个地方发布您的代码，我们可以对其进行测试。这有助于我们回答您的问题。第三，正如我发现你发布了一个javascript代码，但是你没有用</script>标签关闭它。而最重要的部分：从我的意见来说你做错了，你不应该回应你在canvas元素上的所有应用程序，尝试使用分离的div，如timeline.js。这会更容易也更好。尝试制作一个固定宽度的主div，将溢出设置为none并在主div上放置一些额外的div。例如：

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

然后使用jQuery函数scrollTo，用箭头滚动你的主div。

滚动按钮不适用于jQuery

1 个答案: