javascript - CSS 时间轴滚动条

Question

尊敬的人们...

我正在开发一个时间轴滚动条，当我向左滚动时它给我带来了问题....

这些值不是线性相减，而是交替相加……

我已经检查了很多次js但无法弄清楚......

http://codepen.io/akashdevaraju/pen/tiesa

  $("#right,#left").click ->
    id = this.id
    patt = /\d+/g
    circles = $(".circle")    
    if id is "right"
      for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef - 80            
        $(cir).css("left","#{le}px")
    else
      for cir in circles.toArray().reverse()        
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef + 80
        $(cir).css("left","#{le}px")

请帮忙...

Answer 1

尝试使用下面的代码。我对你的正则表达式做了一些修改，所以它不会去掉前面的“-”符号:例如'-80px' 并将返回 '-80'。即使是负值，您的正则表达式也会返回“80”。当按下左键时，正则表达式弄乱了左负偏移量，所有这些圆圈共享相同的偏移量...

$("#right,#left").click ->
    id = this.id 
    patt = /(-)*[0-9]+/g
    circles = $(".circle") 

    for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))
        le = if id is "right" then lef - 80 else lef + 80

        $(cir).css("left","#{le}px")