jQuery滚动后的定时延迟

jQuery scrollto after timed delay

本文关键字：定时 延迟 滚动 jQuery      更新时间：2023-09-26

我有这个页面:http://www.yasyf.com/services.html，其中一个视频自动播放。我想让它，一旦视频完成播放(一段时间)，页面自动向下滚动到文本，使用jQuery滚动与定时延迟，但只有当页面还没有滚动。这可能吗?

请看这里我为你做的例子

更多信息

取决于你正在使用的播放器，可以使用视频完成事件。然后可以将scrollTo函数附加到它。你可以在这里阅读更多关于这个事件的信息:

    YOUTUBE
  • FLOWPLAYER
    • ADOBE

如果可以的话，也可以看看这个非常有用的资源和这个关于HTML5视频的规范。

视频。ly: 在我看来，他们使用的是带有Flash回退播放器的HTML5。看这里的"如何使用视频"部分。

JS代码: 
// add a scrollTo method to jQuery
$.fn.scrollTo = function(duration){
  if(duration == null){ duration = 1000; }
  var offset = $(this).offset().top - $(window).height()/2 + $(this).height();
  $('html,body').animate({ scrollTop: offset}, duration);
}
// Then when the dom is loaded
$("document").ready(function() {
  //for HTML5 (for flash please see the ADOBE link above.)
  $("video").bind("ended", function() {
    // Log on console just for debug
    console.log("autoplay ended! About to scroll to...");
    // scroll to a div with id="scroll_to_here"
    $('#scroll_to_here').scrollTo();
  });
});

var scrolled = false;
$(window).scroll(function(){
    scrolled = true;
});
var scroll_timer = setTimeout(function(){
    if(scrolled !== true)
    {
        // scroll to whatever
    }
},10000);

这是一个简单的脚本。我假设滚动/按下键/鼠标点击表示"用户已经与页面进行了交互，不要自动滚动"。

(function() {
  var scrollPage = function() {
    $.scrollTo(xyz);
  };
  var c = setTimeout(scrollPage, 35000);
  $(document.body).bind('scroll mousedown keydown', function() {
    clearTimeout(c);
  });
})();

如果有帮助请告诉我

相关文章：