jQuery 简单的下雨效果

1.效果展示

 

Html结构

<li class="a-2">

    <button class="d-1">下雨</button>

</li>

1. 效果分析

var click = 0;

$(".d-1").click(function () {

    click++;//每点击一次自增

    if (click % 2 == 0) {//每次点击判断一下取余是否为0

        yuluo(300);//调用下方yuluo的方法，300为雨点个数

        $(this).css({ backgroundColor: "#ebf504",color: "#e06117" });

    } else {

        $(".a-2 div").remove();

        $(this).css({ backgroundColor: "#cc770e",color: "#ffffff" });

    }

});

下面就是下雨效果了

 

function yuluo(num) {

 

    //从给定的数num开始递减，减到1着不再创建div

for (var i = num; i > 0; i--) {

 

//设置随机数

        var d = Math.floor(Math.random() * 50);

        var e = Math.floor(Math.random() * 50);

        var f = Math.floor(Math.random() * 10) + 7;

 

    //创建div再添加上样式类和随机的样式类，想让其动起来还需要配合定位来使用

        var div = $("<div></div>");

        $(".a-2").append(div);

        div.addClass("yluo");

        div.css({

            //给个随机外边距，看起来有点乱的效果

            "margin": d + "px 0 0 " + e + "px",

 

            //写一个从上往下的动画效果

            "animation": "yluo " + f + "s ease-in infinite"

        });

    };

};

 

Css样式:   //样式可以根据自己需求来改变

.yluo {

width: 4px;

height: 10px;

position: absolute;

background-color: rgba(50,140,190,0.8);

bdisplay: inline-block;

border-radius: 70% 70% 50% 50%;

ox-shadow: rgba(30,110,170,0.6);

}