Question

我正在尝试使用点击事件左右移动内容，并且需要通过左侧或右侧的边距停止。 Users or Threads动态生成。这是我到目前为止尝试的代码，但没有价值。通过我的代码，它左右移动容器。但我需要向左和向右移动list-item。

我该怎么做？

list-item

function moveList(px) {
  $('.list').animate({
    'marginLeft': px
  });
}

.list {
  white-space: nowrap;
  overflow: auto;
  height: 85px;
  padding: 10px 0;
  margin: 25px 0;
  position: relative;
}
.list-item {
  display: inline-block;
  min-width: 20%;
  max-width: 150px;
  padding: 10px 0;
  border-radius: 3px;
  background: #eee;
  border: 1px solid #ddd;
  margin: 0 5px;
  cursor: pointer;
  text-align: center;
}
#right-arrow {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 999;
  border-radius: 50%;
  background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  left: 0;
  top: 35px;
  z-index: 999;
  border-radius: 50%;
  background: url(img/left-arrow.png) no-repeat #000;
}

Answer 1

尝试这样的脚本：

function moveList(px) {
  $(".list-item:first-child").animate({
    'marginLeft': px
  });  
}

Answer 2

如果您使用：

创建包含.list-items的元素，则会更容易

position: absolute;
top: 0;
left:0;

然后，您应该修改left值而不是修改边距。

如果您想为您的网站使用语义内容，最好使用其他HTML结构，而不仅仅是div。例如：

<nav> <!-- As this is containing page navigation elements-->
    <ol> <!-- As this is an ordered list of elements-->
        <li> <!-- Each list element-->
            First element
        </li>
        <li>
          Second element
        </li>
    </ol>
</nav>

Answer 3

简单地翻译它们。

定义此项（假设clicker是您点击事件的选择器）。

var xValue = -5;
$("#clicker").on('click', function(e) {
    e.preventDefault();
    $(".list-item").css("transform","translateX("+xValue+")");
    xValue -= 5;
});

翻译不会弄乱您的标记，只会将它正在处理的对象移动到左侧（在本例中）。保留xValue，您可以反复点击clicker。

继续向左移动它们

单击时左右移动内容

3 个答案: