gpt4 book ai didi

javascript - 在 div 的边界内动画图片

转载 作者:太空宇宙 更新时间:2023-11-04 03:19:01 25 4
gpt4 key购买 nike

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

在我当前的设置中,尽管图像位于/内,但在动画期间图像移到了元素之外。

fiddle (可能需要寻找新图像):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;
}

最佳答案

为您的容器提供相对定位并 overflow hidden 的元素将解决您的问题:

#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/

关于javascript - 在 div 的边界内动画图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28211501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com