jQuery是一種廣泛使用的JavaScript庫,它讓Web開發變得更加簡潔和便捷。其中之一的效果便是img掉落。
$.fn.imageFall = function (settings) { settings = jQuery.extend({ minSpeed: 2000, maxSpeed: 5000, minHeight: 200, maxHeight: 400, minWidth: 100, maxWidth: 200, delay: 500 }, settings); return this.each(function () { var $img = $(this), imgWidth = $img.width(), imgHeight = $img.height(), xPos = Math.floor(Math.random() * ($(window).width() - imgWidth)), speed = Math.floor(Math.random() * (settings.maxSpeed - settings.minSpeed + 1) + settings.minSpeed); // 設置圖像的初始位置 $img.css({ left: xPos, top: -imgHeight, height: Math.floor(Math.random() * (settings.maxHeight - settings.minHeight + 1) + settings.minHeight), width: Math.floor(Math.random() * (settings.maxWidth - settings.minWidth + 1) + settings.minWidth), position: "absolute" }); // 使用animate()函數使圖像掉落 $img.delay(Math.floor(Math.random() * settings.delay)).animate({ top: $(window).height() }, speed, function () { $(this).remove(); }); }); }
這段代碼中,我們定義了一個新的jQuery函數imageFall。該函數使用了jQuery的擴展方法,以便輕松地使用各種設置來控制圖像掉落效果的各個方面。在函數的主體中,我們使用了animate()函數來設置圖像的初始位置,并隨機生成其大小和落下速度等屬性。
使用該方法只需要將imageFall()函數與圖像元素相關聯即可:
$("#myImg").imageFall({ minSpeed: 1000, maxSpeed: 3000, minHeight: 50, maxHeight: 100, minWidth: 50, maxWidth: 100, delay: 100 });
這將使你的圖像掉落并在線動畫中消失,為你的頁面添加一個有趣的動態效果。