jQuery实现钱飘落效果特效代码

jQuery实现钱飘落效果特效代码

jQuery页面撒钱效果,代码很简单修改方便,想要别的效果可以替换图片比如落叶或者其他!

使用方法
引入相关CSS样式文件index.css、animate.min.css

1
2
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.min.css">

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const NUMBER_OF_LEAVES = 15;
const width=window.screen.width;
function init(){
    var container = document.getElementById('leafContainer');
    for (var i = 0; i < NUMBER_OF_LEAVES; i++)
    {
        container.appendChild(createALeaf());
    }

}
function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}
function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}
function pixelValue(value)
{
    return value + 'px';
}

function durationValue(value)
{
    return value + 's';
}
function createALeaf()
{
    var leafDiv = document.createElement('div');
    var image = document.createElement('img');
    image.src = 'images/cash' + randomInteger(3, 7) + '.png';
    leafDiv.style.top = "-100px";
    leafDiv.style.left = pixelValue(randomInteger(0, width));
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
    leafDiv.style.webkitAnimationName = 'fade, drop';
    image.style.webkitAnimationName = spinAnimationName;
    var fadeAndDropDuration = durationValue(randomFloat(3, 9));
    var spinDuration = durationValue(randomFloat(3, 7));
    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
    var leafDelay = durationValue(randomFloat(0, 0));
    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
    image.style.webkitAnimationDuration = spinDuration;
    leafDiv.appendChild(image);
    return leafDiv;
}
window.addEventListener('load', init, false);
1
2
image.src = 'images/cash' + randomInteger(3, 7) + '.png';(这一段直接改变图片)
durationValue (改变撒钱下坠效果)
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论