滚动时使用javascript在距离顶部一定距离的动画

时间:2017-10-25 11:53:30

标签: javascript jquery html css

如何从顶部滚动300后延迟图像的大小。

是否可以使用var。

我不知道如何延迟它,以便在距离顶部一定距离时动画。

我正在使用这个脚本:

Img001Size = function () {

    // Get the real width of the logo image
    var theImg1 = $("#theImg1");
    var newImage = new Image();
    newImage.src = theImg1.attr("src");
    var imgWidth = newImage.width;

    // distance over which zoom effect takes place
    var maxScrollDistance = 1300;

    // set to window height if larger
    maxScrollDistance = Math.min(maxScrollDistance, $(window).height());

    // width at maximum zoom out (i.e. when window has scrolled maxScrollDistance)
    var widthAtMax = 500;

    // calculate diff and how many pixels to zoom per pixel scrolled
    var widthDiff = imgWidth - widthAtMax;
    var pixelsPerScroll =(widthDiff / maxScrollDistance);

    $(window).scroll(function () {
        // the currently scrolled-to position - max-out at maxScrollDistance
        var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance);

        // how many pixels to adjust by
        var scrollChangePx =  Math.floor(scrollTopPos * pixelsPerScroll);

        // calculate the new width
        var zoomedWidth = imgWidth - scrollChangePx;

        // set the width
        $('.Img001').css('width', zoomedWidth);
 });
}

Img001Size();

0 个答案:

没有答案