Question

我正在寻找更改此脚本，以便在页面加载后动画开始，而不是在点击div时。

对我如何做到这一点的任何建议都将非常感激。

这是JS

$(document).ready(function() {

$(".marqueeElement").last().addClass("last");
$(".mholder").each(function() {
    var i = 0;
    $(this).find(".marqueeElement").each(function() {
        var $this = $(this);
        $this.css("top", i);
        i += $this.height();
    });
});

$('.mholder').click(function() {
    var countScrolls = $('.mholder .marqueeElement').length;

    for (var i=0; i < countScrolls; i++) {
       doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
    }
});
});

function doScroll($ele) {
var top = parseInt($ele.css("top"));
if (top < -60) { //bit arbitrary!
    var $lastEle = $ele.closest('.mholder').find(".last");
    $lastEle.removeClass("last");
    $ele.addClass("last");
    var top = (parseInt($lastEle.css("top")) + $lastEle.height());
    $ele.css("top", top);
}
$ele.animate({
    top: (parseInt(top) - 60)
}, 80, 'linear', function() {
    doScroll($(this))
});
}

Answer 1

只需将代码移到.ready()事件中。

$(document).ready(function() {

$(".marqueeElement").last().addClass("last");
$(".mholder").each(function() {
    var i = 0;
    $(this).find(".marqueeElement").each(function() {
        var $this = $(this);
        $this.css("top", i);
        i += $this.height();
    });
});

    var countScrolls = $('.mholder .marqueeElement').length;

    for (var i=0; i < countScrolls; i++) {
       doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
    }

});

Answer 2

假设'.mholder'是div的选择器，只需删除点击处理程序 - 即从以下位置更改：

$('.mholder').click(function() {
    var countScrolls = $('.mholder .marqueeElement').length;

    for (var i=0; i < countScrolls; i++) {
       doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
    }
});

到

var countScrolls = $('.mholder .marqueeElement').length;

for (var i=0; i < countScrolls; i++) {
   doScroll($('.mholder .marqueeElement:nth-child(' + i + ')'));
}

Answer 3

最简单的方法是将以下（在绑定click事件之后）放在on ready函数的末尾：

$('.mholder').click()

将脚本从开始onclick更改为onload

3 个答案: