我正在使用parallax.js在首页上设置一系列元素的动画。我搜索了允许我向元素添加简单的“滑块”效果的代码。

一切似乎都工作正常,除了第一个li之后,视差效果仅在水平方向起作用。在li#1上,元素按预期方式悬停,在各个方向上都跟随鼠标。

这是jsfiddle的链接:http://jsfiddle.net/sdeviva/t6uwq/1/

这是修改后的jsfiddle的链接:http://jsfiddle.net/sdeviva/t6uwq/5/

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);


(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
        fadeIn  : 1000,
        fadeOut : 1000,
        delay   : 500
    },
    settings = $.extend( defaults, options ),
    $this = this,
    cur = 0,
    fadeIt = function( which ) {
        var li = $this.find('li');

        cur = which = (which >= li.length) ? 0 : which;

        li.fadeOut( settings.fadeOut );
        li.eq( which )
          .delay( settings.fadeOut )
          .fadeIn( settings.fadeIn, function(){
            setTimeout(function() {
                cur++;
                fadeIt( cur );
            }, settings.delay);
        });

    };

fadeIt( cur );
};

$('ul.scene').ezslide({
    fadeIn  : 600,
    fadeOut : 600,
    delay   : 3000
    });
})(jQuery);


编辑:我解决了这个问题。我真的不知道我在做什么,所以可能有一种更清洁的方法。但是,我意识到视差效果只对第一个列表项应用了一次。使每个项目淡入的脚本没有获得parallax.js脚本的好处。

如此-我将每个衰落元素放入自己的ul中,具有唯一的ID和一个共享的类。奇迹般地,这确实有效。但是,让我知道是否有更好的方法。

最佳答案

这是一个有趣的。问题是视差代码将第一层设置为position: relative,所有其他层设置为position: absolute。这样的效果是使父ul仅具有第一层的尺寸。通常,这很好,但是当您显示除第一个元素以外的任何元素时,第一个元素将被隐藏。这导致ul的高度为0。视差取决于场景的高度,因此没有高度意味着没有垂直移动。

您可以通过将固定高度应用于ul来解决此问题:

#scene{
    height: 128px;
}


http://jsfiddle.net/t6uwq/7/

您可以在documentation on github中找到有关运动计算的更多详细信息。

关于javascript - parallax.js + js fadein/out =第一个<li>之后没有喜悦,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24199331/

10-12 12:57
查看更多