gpt4 book ai didi

jquery - 当元素再次离开屏幕时使用 jQuery 执行操作?

转载 作者:行者123 更新时间:2023-12-01 04:09:24 24 4
gpt4 key购买 nike

我发现这个脚本会在元素位于视口(viewport)中时自动播放视频

$(window).scroll(function() {
$('#youtube-player-container').each(function(){
var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('#youtube-player-container').tubeplayer("play");
}
});
});

这效果很好,但我还想在视频不再出现在屏幕上时再次暂停它。我需要编辑/添加什么才能实现此目的?

编辑:我知道有一个可用的 Action “tubeplayer("pause"),我只是不知道如何激活它。

最佳答案

一个非常好的函数来确定你的元素是否在视口(viewport)中 Link

function isElementInViewport (el) {
var rect = el.getBoundingClientRect();

return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}

总计:

$(window).scroll(function(){

$('.youtube-player-container').each(function(){
var $this = $(this);
var el = $this.get(0);
if (isElementInViewport(el)) {
$this.tubeplayer("play");
} else {
$this.tubeplayer("stop");
}
})

})

PS:id 是一个唯一的选择器,我假设您想输入“.youtube-player-container”

关于jquery - 当元素再次离开屏幕时使用 jQuery 执行操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22559456/

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