Javascript - 通过按下另一个元素来移动元素答案

【问题标题】：Javascript - move elements by pressing another elementJavascript - 通过按下另一个元素来移动元素
【发布时间】：2015-02-26 11:27:55
【问题描述】：

假设我有一个带有图像的 div，但并非所有空间都可以同时显示，所以我使用了 CSS 属性 white-space: nowrap 和 overflow: hidden，所以元素不会换行或在 div 上展开。

现在我需要 JavaScript 技术来允许我向左或向右移动它们，以便用户也可以看到这些不可见的图像。把它想象成一个滑块。

它应该有两个导航按钮，左和右，通过按下每个按钮，图像会向特定方向移动。运动应该是动画的（不是立即移动，而是应该在特定的时间段内逐帧移动）

这里是 jsfiddle 演示：http://jsfiddle.net/rfLffev7/ （红色和绿色的div代表应该触发功能的按钮）

HTML：

<div id="container">
    <div id="left"></div>
    <div id="track">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
    </div>
    <div id="right"></div>
</div>

CSS：

#container {
    width: 600px;
    height: 200px;
    margin: 10px auto;
}

#left {
    width: 50px;
    height: 200px;
    float: left;
    background: #500;
}

#track {
    width: 500px;
    height: 200px;
    float: left;
    background: #333;
    white-space: nowrap;
    overflow: hidden;
}

#track img {
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    margin-top: 50px;
    margin-left: 10px;
}

#right {
    width: 50px;
    height: 200px;
    float: left;
    background: #050;
}

【问题讨论】：

针对这个具体问题，我尝试了换班，但效果不佳，结果不对。

标签： javascript jquery css

【解决方案1】：

我会为此使用绝对定位，因为 CSS 会更简单。对于 JavaScript，这很简单。

在这里，我从“margin-left”中减去 116px 以将 #track 移至左侧，并将 116px 添加到 #track 以将其移回右侧。我没有在两端添加任何“停止”，所以理论上你可以无限期地滚动。

document.getElementById("left").onclick = function(){
  var currentPlace = parseInt(document.getElementById("track").style.marginLeft) || 0;
  document.getElementById("track").style.marginLeft = (currentPlace - 116) + "px"
}

document.getElementById("right").onclick = function(){
  var currentPlace = parseInt(document.getElementById("track").style.marginLeft) || 0;
  document.getElementById("track").style.marginLeft = (currentPlace + 116) + "px"
}

这是一个工作示例（使用绝对定位）：http://jsfiddle.net/rfLffev7/1/

我还添加了一个额外的 :nth-child(even) 类，以使图像在移动时更加明显：

#track img:nth-child(even) {
  border: 1px solid #f00;
}

【讨论】：

正是这样！但是你如何让它变得平滑？动画？
你可以添加一个 CSS3 过渡：transition:margin-left 300ms; jsfiddle.net/rfLffev7/5
完美！这正是我所需要的！谢谢你，兄弟！顺便说一句，你会如何限制？就像当你到达行尾时（#track），它不会走得更远。

【解决方案2】：

您可以使用边距移动内部轨道。例如，检查元素的边距值，然后检查图像的大小（或您想要移动轨道的任何距离），然后将这两个值相加，然后将新值应用于轨道。

$('#right').click(function(){
var moveDistance = $('#track').find('img').width()
var moved = $('#track').css('marginLeft');
var moveIt = moveDistance - parseInt(moved)
$('#track').css('marginLeft', -moveIt);
});

我已经用我的意思更新了你的例子。绿色按钮用于移动 1 张图像的距离 + 元素边距的先前值。

http://jsfiddle.net/rfLffev7/4/

您还需要对 CSS 进行一些更改以保持其他元素的位置。

#container {
width: 600px;
height: 200px;
margin: 10px auto;
overflow:hidden;
position:relative;
}

#left {
width: 50px;
height: 200px;
left:0;
background: #500;
position:absolute;
z-index:1;
}

#track {
width: auto;
height: 200px;
float: left;
background: #333;
white-space: nowrap;
overflow: hidden;
position:absolute;
left:50px;
}

#track img {
width: 100px;
height: 100px;
border: 1px solid #fff;
margin-top: 50px;
margin-left: 10px;
}

#track img:nth-child(even) {
border: 1px solid #f00;
}

#right {
width: 50px;
height: 200px;
background: #050;
position:absolute;
right:0;
}

【讨论】：