如何从顶部滚动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();