jq红包雨动画

Html

Css

.content {
	position:relative;
}
.red-box {
	position:absolute;
}
.red-box img {
	width:50px;
	height:auto;
	cursor:pointer;
}
.hide {
	display:none;
}
.time {
	position:absolute;
	right:30px;
	bottom:30px;
	color:red;
	font-size:20px;
}

$(function() {
    const $content = $('.content');
    const $redBox = $('.red-box');
    const redContentWidth = $content.width();
    const redBoxWidth = $redBox.width();
    const basePadding = 30;
    const maxLeftPX = redContentWidth - redBoxWidth - basePadding * 2;

let zIndex = 1;
    let timer;

function getRandom(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

function redBoxSpeed($el, time) {
        $el.animate({
                top: '600px'
            },
            time * 1000,
            function() {
                $el.remove();
            }
        )
    }

function createRedBox() {
        const $newNode = $redBox.clone(true);
        $newNode.attr('data-txt', Math.random() * 100);
        $newNode.css({
            'z-index': zIndex++,
            'left': getRandom(basePadding, maxLeftPX) + 'px',
            'transform': 'rotate(' + getRandom(-30, 30) + 'deg)'
        })
        $content.append($newNode);
        redBoxSpeed($newNode, 5);
    }

function ready() {
        createRedBoxRain();
    }
    ready();
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

jq红包雨动画



代码描述：jq倒计时红包雨动画

更新时间：2019-11-26 11:37:21

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

程军芳

相关代码

jq红包雨动画

最新