Question

在开展更大的项目时，我制作了一个包含不同内容的盒子。

该框宽度为1000像素，显示5张（满分50张）图片。盒子页面从前5个开始到接下来的5个，依此类推，每8秒钟一次（已经用jQuery动画写了这个）。

现在我的问题是，Box位于我的页面中间，因此当访问者保持在顶部并向下滚动30秒后，他们会错过我的Box中的第一张图片。

所以我的计划是在访问者可以看到框（视口）的那一刻开始我的盒子的分页。

我为那个

做了一个测试页

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">THIS BOX<br>THIS BOX<br>THIS BOX</div>
<div class="box"></div>
<div class="box"></div>

.box {
    border:2px solid black;
    height: 400px; 
    width: 200px;
    margin: 0 auto;
    margin-top:10px;
}

http://jsfiddle.net/H9xr8/

到目前为止我使用

jQuery(document).ready(function(){
    getThemenCount();
    moveThemenAnimate();
});

我的计划是从准备好的文件切换到if element is in viewport类的东西

我已经试图找到不同的方法，但我似乎无法让它发挥作用。

http://jsfiddle.net/moagrius/wN7ah/

仅适用于不同的类和点击。

我想做的事情（以及我无法工作的）是我想在参与者的视野中开始我的动画脚本。这样他就可以从图片1开始看到我的照片。

有没有可能像我计划的那样让这个工作？不知怎的，我不知道如何设置jQuery表达式+脚本只有在我使用类和点击时才能自己工作（如上面的小提琴）

Answer 1

根据发布的内容，这可能是一个简单的工作示例，

http://jsbin.com/majavubu/1/edit

<强> JS

$(document).ready(function(){

  $(window).scroll(function(){
    if($(".the-box").isOnScreen()){
      if(!animationStarted){
        startAnimation();
      }
  }else{
    stopAnimation();
  }
  });
});

var animationStarted=false;
function startAnimation(){
  animationStarted = true;
  for(var i=0;i<10&&animationStarted;i++){
    $(".the-box").animate({"background-color":randomColor()}).delay(500);
  }
}

function stopAnimation(){
  animationStarted = false;
  $(".the-box").stop();
  $(".the-box").css("background-color","white");
}

$.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};



function randomColor(){return '#'+Math.floor(Math.random()*16777215).toString(16);}

Answer 2

您需要侦听window scroll事件，然后触发回调以检查该框是否在视口中。

从性能方面听取scroll事件可能会很危险，因为当用户滚动时，回调会自动触发。它被认为是使用限制机制来限制回调被触发的时间的最佳做法。

此工作示例每秒检查用户滚动位置4次，并在视图中出现该框后禁用事件侦听器。

http://jsfiddle.net/H9xr8/1/

// document ready
$(function () {

    // define the isOnScreen plugin from http://jsfiddle.net/moagrius/wN7ah/
    $.fn.isOnScreen = function() {
        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft(),
            right: win.scrollLeft() + win.width(),
            bottom: win.scrollTop() + win.height()
        };

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
    };

    // define throttling function for use in scroll event listener
    // ref: http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/
    function throttle(delay, callback) {
        var previousCall = new Date().getTime();
        return function() {
            var time = new Date().getTime();
            if ((time - previousCall) >= delay) {
                previousCall = time;
                callback.apply(null, arguments);
            }
        };
    }

    // set up an event to listen for window scroll 4 times a second
    $(window).on('scroll', throttle( 250, function () {

        // if #the-box is visible the call init functions and disable window scroll
        // event listener, as you only want to initialise the lightbox once
        if ( $("#the-box").isOnScreen() ) {

            // for demo purposes
            alert('init');

            // call your init functions here
            //getThemenCount();
            //moveThemenAnimate();

            // turn off scroll listener
            $(window).off('scroll');
        }
    }));
});

Viewport JQuery - 如果元素在视口中，则将文档更改为ready

2 个答案: