js 落叶动效

web H5 落叶动效js代码

$(function() {
    var d = "<div class='maple'>*<div>";
    setInterval(function() {
        var f = $(document).width();
        var e = Math.random() * f - 300; // 枫叶的定位left值
        var o = 0.2 + Math.random(); // 枫叶的透明度
        var fon = 20 + Math.random() * 40; // 枫叶大小
        var l = e - 100 + 200 * Math.random(); // 枫叶的横向位移
        var k = 2000 + 5000 * Math.random();
        var deg = Math.random() * 360; // 枫叶的方向
        $(d).clone().appendTo(".maplebg").css({
            left: e + "px",
            opacity: o,
            transform: "rotate(" + deg + "deg)",
            "font-size": fon,
        }).animate({
            top: "150px",
            left: l + "px",
            opacity: 0.1,
        }, k, "linear", function() {
            $(this).remove()
        })
    }, 1000)
})