javascript - 图像动画下来 javascript(无 jQuery)

Question

我知道如何使用 jQuery 修复仅当图像显示在窗口中时才会出现的动画，但现在我想使用 JavaScript 来实现这一点。正在为此苦苦挣扎。图像必须流畅地向下移动(+50px，持续 1.6 秒)。谷歌搜索了一下，但我建议大多数都是用 jQuery 完成的，但这不是我想要的。此外，当滚动顶部在 600 像素到 800 像素之间时，动画应该开始。

function scrollFunction() {
	var animate = document.getElementById("picture");
	var position = 0;
    var top = 0;
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	if(scrollTop > 600 && scrollTop < 800){
		position++;
		animate.style.top = position + "50px";
	} else {
		stop();
	}
}

function stop() {
	clearTimeout(animate);
}

#picture {
	width: 100%;
	height: auto;
	top: -5px;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

<div class="col-sm-12 col-xs-12">
        <h1 class="responsive-h1">Mi<span class="logo-orange"> Pad2</span></h1>
            <p class="edition-title above-text-black">Black Edition</p>
        <img src="Img/picture.jpg" id="picture"/>
      </div>

Answer 1

jsFiddle:https://jsfiddle.net/n1q3fy8w/

Javascript

var imgSlide = document.getElementById('slidedown-image');

var slideDown = setInterval(function() {
  var topVal = parseInt(window.getComputedStyle(imgSlide).top, 10);
  imgSlide.style.top = (topVal + 1) + "px";
}, 15);

setTimeout(function( ) { clearInterval( slideDown ); }, 1600);

您首先获取元素，然后设置一个 setInterval ，这基本上会将我们的 img 向下移动，然后我们还设置一个 setTimeout在 1600ms 后删除 slideDown 间隔并且图像停止。但是，您的图像可能需要position:absolute。

上述答案仅适用于 Chrome，但这应该适用于所有浏览器

jsFiddle:https://jsfiddle.net/n1q3fy8w/1/

JavaScript

var imgSlide = document.getElementById('slidedown-image');

var slideDown = setInterval(function() {
  var topVal = parseInt(imgSlide.style.top, 10);
  imgSlide.style.top = (topVal + 1) + "px";
}, 15);

setTimeout(function( ) { clearInterval( slideDown ); }, 1600);

好吧，getComputedStyle 仅适用于 chrome，因此要使其适用于所有其他浏览器，您必须在元素上专门设置 css 属性，而不是通过CSS。

当您使用 javascript 访问元素并更改其样式时，element.style.bottom = '150px' .style 将为您获取所有 css 值对于该元素上的内联样式，因此通过 .css/.less 文件完成的元素上的任何 css 更改都无法通过 javascript 访问。

所以上面的代码所做的就是我们在元素本身上设置一个 top: 0 ，在我们的代码中我们使用 imageSlide.style.top 而不是 chrome 的 >window.getCompulatedStyle