Question

我正在尝试创建一个水平选择滑块，该滑块可在联系表单内使用，以便选择所需的金额。我已经制作了我想要的原型，但是每当我尝试在HTML / CSS中复制它时，都不会碰运气。有人可以帮助我，告诉我我做错了什么。

原型：https://i.gyazo.com/acabda5c81a19686a2ae0f7201314c11.mp4

很明显，我只希望移动圆角框内的文本，而不是整个页面，因为那是因为我在AdobeXD内构建了文本。

我无法提供任何有效的代码，因为我什至没有实现我所期望的目标。我也环顾了Google，却找不到任何涉及“水平选择框”的信息（例如）

我想要的只是向正确的方向发展，我不希望为我编写完整的代码，所以请不要对这篇文章投下反对票。

先谢谢您。杰克。

（添加了jQuery标签，因为我认为这是必需的）

Answer 1

我将使用Javascript创建一个按钮单击事件，并以左右（上下）作为参数。根据参数增加或减少变量，如果变量大于或小于选择的数量，则将“换行”到另一侧。列出所有价格。

增加或减少变量后，使用它来引用列表并更改选择器的InnerHTML。

Answer 2

这是您所描述内容的基本实现，您可以进一步了解。

在实现此效果的方法中，有三个主键：

想法是-在任何时候-可见元素之前的所有元素都具有类hiddenLeft，而其后面的所有元素都具有类hiddenRight。
overflow: hidden CSS属性，用于隐藏“隐藏”的项目。
transform: translateX() CSS属性，这些属性允许transition相应地对项目进行动画处理。
将类hiddenLeft/hiddenRight添加到元素时，它会沿相关方向转换。删除它们后，元素将过渡到框的中心，从而过渡到可见区域。

var current = 1;
const initial = 1;

// Initialization
const contentItems = document.getElementsByClassName('buttonContent');
for (let i = 0; i < contentItems.length; i ++) {
  if (i < initial) {
    contentItems[i].classList.add('hiddenLeft');
  }
  else if (i > initial) {
    contentItems[i].classList.add('hiddenRight');
  }
}

function move(direction) {
  if (direction < 0 && current < contentItems.length - 1) {
    contentItems[current].classList.add('hiddenLeft');
    contentItems[current + 1].classList.remove('hiddenRight');
    current++;
  } else if (direction > 0 && current > 0) {
    contentItems[current].classList.add('hiddenRight');
    contentItems[current - 1].classList.remove('hiddenLeft');
    current--;
  }
}

#box {
  overflow: hidden;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between
}

.button {
  background-color: tomato;
  padding: 10px;
  cursor: pointer;
}

.buttonContent {
  transform: translateX(0);
  transition: all 0.5s;
}

.hiddenLeft {
  transform: translateX(-200px);
}

.hiddenRight {
  transform: translateX(200px);
}

<div id="box">
  <div id="leftButton" class="button" onclick="move(-1)">&#60;</div>
  <div id="content">
    <div class="buttonContent">red</div>
    <div class="buttonContent">green</div>
    <div class="buttonContent">blue</div>
  </div>
  <div id="rightButton" class="button" onclick="move(1)">&#62;</div>
</div>

水平选择滑块

2 个答案: