Question

我正在尝试获取一个大型徽标（在我的网站标题中），以便在加载时落入标题区域。所以这是我能找到的唯一符合这个想法的jquery函数。

var $dropDiv = $('#dropDiv');
   $('#holder a').on('click', function() {
    // get position of the element we clicked on
    var offset = $(this).offset();

    // get width/height of click element
    var h = $(this).outerHeight();
    var w = $(this).outerWidth();

    // get width/height of drop element
    var dh = $dropDiv.outerHeight();
    var dw = $dropDiv.outerWidth();

    // determine middle position
    var initLeft = offset.left + ((w/2) - (dw/2));

    // animate drop
    $dropDiv.css({
            left: initLeft,
            top: $(window).scrollTop() - dh,
            opacity: 0,
            display: 'block'
        }).animate({
            left: initLeft,
            top: offset.top - dh,
            opacity: 1
        }, 300, 'easeOutBounce');
});

我基本上想知道，是否可以将点击触发器切换为onload调用？如果不可能的话，我不想为了让它发挥作用而糊涂。

谢谢。

Answer 1

这是updated Fiddle。 $(function() { ... });是“文档准备就绪”的缩写。我还将函数包装在setTimeout();中，因为它快速启动以查看完整效果。更改setTimeout中的第二个参数以调整等待触发的时间......

已更新（根据@coby建议）：如果您有大量图片，可以将$(function() {更改为window.onload(function() {。 Ready不会等待所有图像完全加载。

JQuery div降低了对onload的影响

1 个答案: