Question

我试图在图像上滑动一个div，得分为0-100，不幸的是，它刚刚从0-98开始。

现在我确定以下计算存在问题以及它们与我的div的定位进行交互的方式，但我不确定如何在逻辑上对其进行补救。

这是plnk +代码;

https://plnkr.co/edit/oqhrDeP52vdzcKqpQvbl?p=preview

 var position = sliderDiv.position(),
    sliderWidth = sliderDiv.width(),
    minX = position.left,
    maxX = minX + sliderWidth,
    tickSize = sliderWidth / range;

  drop: function(e, ui) {
      var finalMidPosition = $(ui.draggable).position().left + Math.round($(divs).width() / 2);
      if (finalMidPosition >= minX && finalMidPosition <= maxX) {
        var val = Math.round((finalMidPosition - minX) / tickSize);
        sliderDiv.slider("value", val);
        $(".slider-value",ui.draggable).html(val);
        $("#text1").val($(".item1 .slider-value").html())
      }
    }

这是我的CSS;

#content {
  width: 970px;
  height: 400px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

#containment {
  position: absolute;
  width: 1000px;
  right: -15px;
  height: 100%;
}

#itemArea {
  position: relative;
  width: 85%;
  height: 50%;
  top: 10%;
  left: 7.5%;
  float: left;
}

#row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.itemContainer {
  display: block;
  height: 100%;
  width: 33% !important;
}

.itemContainer:hover {
 z-index: 1;
}

.candle {
  position: relative;
  top: 0;
  width: 5px;
  height: 40px;
  border-width: 0px 0px 5px 5px;
  border-style: solid;
  border-color: transparent rgb(210, 211, 213);
  left: 50%;
  opacity: 1;
}

#barContainer {
  position: absolute;
  bottom: -20px;
  left: 53px;
  width: 80%;
  height:12px;
}
#ratingBar {
  position:absolute;
  width: 865px;
  height: 78px;
  background-color: rgb(210, 211, 213);
  z-index: 1;
}

.item1 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/UFB2GNa.jpg") 50% 50% repeat-x;

}

.item2 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/WWY1gZG.jpg") 50% 50% repeat-x;

}

.item3 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/nF6bQDX.jpg") 50% 50% repeat-x;

}

.item4 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/UC4gDcq.jpg") 50% 50% repeat-x;

}

.item5 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/xBeJXpo.jpg") 50% 50% repeat-x;

}

.item6 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/5u0gUUI.jpg") 50% 50% repeat-x;

}

.ui-widget-content {
  background: #ffffff url("http://i.imgur.com/mnG2sSY.jpg") 50% 50% repeat-x !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: none !important;
  background: none !important;
}

希望这是一个简单的修复，

全部谢谢

Answer 1

标签的位置（）。左是指自己的初始位置，用#itemArea { left: 7.5%; }设置样式。但是，滑块是具有#barContainer { left: 53px; }的样式。让它们完全相同。

jQuery Slider无法正确计算范围

1 个答案: