CSS 时间轴滚动条答案

【问题标题】：CSS Timeline scrollerCSS 时间轴滚动条
【发布时间】：2023-04-03 18:52:01
【问题描述】：

尊敬的人……

我正在研究一个时间轴滚动器，当我向左滚动时它会给我带来问题......

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

我已经检查了很多次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")

请帮忙...

【问题讨论】：

再次检查你的正则表达式，当左属性为负时，它也会去掉'-'符号，codepen更新
codepen 是哪个？ ...我的没有得到更新...谢谢:) ...
sry，忘记链接codepen.io/anon/pen/lcLkg :)

标签： javascript jquery css coffeescript timeline

【解决方案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")

【讨论】：