Question

我创建了一个范围滑块，在Stackoverflow的帮助下，工具提示几乎正确地跟随滑块。我遇到的问题是工具提示并不总是位于滑块拇指上方。特别是当您从右侧向左移动滑块时。

https://codepen.io/stinkytofu3311/pen/gWYBWb

我已经研究了这个，我认为它与偏移位置有关。有人有这方面的经验吗？

// Tool Tip
$(document).mousemove(function(e){   
    if(moveit){
            var parentOffset = $('#range-slider').parent().offset(); 
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            var step = $('#range-slider').width()/5; 
            valS = $('#range-slider').val();
            if(val != valS){
              val = $('#range-slider').val();
              console.log(val);
              console.log(step * val);
              var xxx = relX + step;
              console.log(relY);
              console.log(relX);
            }
            //console.log(relX);
            $('#sliderPrice').css('top', parentOffset.top-350).css('left',xxx-120);
            //console.log($("#range-slider").val());
    }
  });

Answer 1

我已更新了您的工具提示移动功能。您不再需要step变量，而是创建了一个新变量offsetLeft来代替xxx。

新的if语句将检查valS是否小于或等于val，如果是，我们会添加工具提示的偏移量＆＃39 ;宽度。

此外，如果两个值不匹配以及更新val变量，我们只会移动工具提示。

希望这有帮助！

修改

您还会注意到新的.css()函数调用正在使用对象，而不是再次调用.css()。

＆＃13;

// Tool Tip
$(document).mousemove(function(e){   
    if(moveit){
            var parentOffset = $('#range-slider').parent().offset(); 
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            var step = $('#range-slider').width()/5;
            var leftOffset = (relX - 120);
            valS = $('#range-slider').val();
            if(val != valS){
              if ( valS >= val ) {
                leftOffset += 120;
              }
              val = $('#range-slider').val();
              $('#sliderPrice').css({
                'top': parentOffset.top-350,
                'left': leftOffset
              });
            }
            //console.log(relX);
            //$('#sliderPrice').css('top', parentOffset.top-350).css('left',leftOffset);
            //console.log($("#range-slider").val());
    }
  });

＆＃13;

相对于输入[type = range]的绝对定位 - 不工作

1 个答案:

修改