Question

我有一些代码可以多次在屏幕上移动图像/元素。我的想法是，我正在尝试创建一个简单的添加栏，图像在添加栏中移动，该元素充当栏/实际栏的边框。

使用我当前的设置，尽管在/.

中有位置，但在动画期间图像会移动到元素之外

小提琴（可能需要找到新图片）：http://jsfiddle.net/rwowf5j8/3/

<body onload="setInterval(function(){anim(document.getElementById('test'), 'left', 'px', 300, 800, 500)}, 600)">
<div id="Advert">
 <img src="JS.png" id="test">
</div>
</body>
<script>
function anim(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },30);
    elem.style[style] = from+unit;
}
</script>
</body>


#Advert {
background-color: white;
border-style: solid;
border-width: 2px;
width: 500px;
height: 225px;
left: 300px;
}
#test {

position: absolute;
left: 140px;
}

Answer 1

http://jsfiddle.net/rwowf5j8/5/

添加

#Advert {
    position: relative;
    /*left: 300px;*/
    overflow: hidden;
}

此外，左：300px将无效，除非您添加position：relative。

Answer 2

为您的容器提供相对定位并隐藏溢出的元素将阻止您的问题：

#Advert {
  background-color: white;
  border-style: solid;
  border-width: 2px;
  width: 500px;
  height: 225px;

  overflow: hidden;
  position: relative;
}

由于容器现已相对，我还删除了left: 300px。

http://jsfiddle.net/rwowf5j8/6/

动画在div的边界内的图片

2 个答案: