0

对于我正在处理的网站，我需要在元素滚动到视图中时为其添加一个类。页面上有多个元素需要为此工作。

我已经设置了一个小提琴来展示它是如何工作的：http: //jsfiddle.net/e8qX9/35/

以下是导致我出现问题的部分：

if ($('#one').doesExist()) { // checks if element exists
    $(window).scroll(function () { // on scroll
        addInView('#one', 'slideleft', 0.2); // run function with params
    });
    addInView('#one', 'slideleft', 0.2); // run function again on page load
}

if ($('#two').doesExist()) {
    $(window).scroll(function () {
        addInView('#two', 'slideright', 0.5);
    });
    addInView('#two', 'slideright', 0.5);
}

if ($('#three').doesExist()) {
    $(window).scroll(function () {
        addInView('#three', 'slideup', 0.2);
    });
    addInView('#three', 'slideup', 0.2);
}

if ($('#four').doesExist()) {
    $(window).scroll(function () {
        addInView('#four', 'slidedown', 0.5);
    });
    addInView('#four', 'slidedown', 0.5);
}

if ($('#five').doesExist()) {
    $(window).scroll(function () {
        addInView('#five', 'slideleft', 0.2);
    });
    addInView('#five', 'slideleft', 0.2);
}

我想知道是否有更好的方法在页面加载和滚动时多次运行此功能。我考虑过创建一个多维数组并循环遍历它，但无法完全理解它。

谢谢

4

2 回答 2

0

好吧，在数组循环部分，你可以有这个

$('section[id]').each(function(i, e){
    $(window).scroll(function() {
        addInView(e, 'slideleft', 0.2);
    });
    addInView(e, 'slideleft', 0.2);
});

其中 section[id] 匹配所有具有 id 的 section 元素。您应该使用 css 类并尽量避免使用 id。

each 使用 i = index 和 e = element 的函数对这些元素进行迭代。

除此之外，您正在为您拥有的每个元素在窗口上注册一个滚动事件，这并不好。最好只注册一个事件并在那里做必要的工作。也许找到另一种事件类型（不确定这是否可行http://api.jquery.com/visible-selector/）

于 2013-11-20T12:16:45.847 回答
0

(函数($){

$.fn.gAppear = function(options){

    var defaults = {
        slideDuration: 0.2,
        slideDirection: "slideleft"
    };

    options = $.extend(defaults, options);

    var appear = $(this); 

    $(window).scroll(function () {
        addInView(appear, defaults.slideDirection, defaults.slideDuration);
    });
   addInView(appear, defaults.slideDirection, defaults.slideDuration);


    function isScrolledIntoView(elem, vpoffset) {    
        var docViewTop = $(window).scrollTop();
         //$(elem).text(docViewTop);
        var docViewBottom = docViewTop + $(window).height();
         //$(elem).text(docViewBottom);
        var elemTop = $(elem).offset().top + ($(elem).height()*vpoffset);
        $(elem).text(docViewBottom+" "+elemTop);
        return (docViewBottom >= elemTop);

    }

    function addInView(trigger, cssClass, vpoffset) {
        if (isScrolledIntoView(trigger, vpoffset)) {
            if (!$(trigger).hasClass(cssClass)) {
                $(trigger).addClass(cssClass);
            }
        }
    }

};

})(jQuery);

//实例化

$('#one').gAppear({ slideDirection: "slideright", slideDuration: 0.1 });

$('#two').gAppear({ slideDirection: "slideleft" });

于 2013-11-20T12:19:06.387 回答