jQuery实现下雪效果

最新推荐文章于 2023-11-21 17:14:24 发布

Month7

最新推荐文章于 2023-11-21 17:14:24 发布

阅读量2k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_29187355/article/details/78473326

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先上效果图：

基本原理：

动态生成雪花div，设置它的定位为绝对定位。

初始时，设置它的位置为距顶部-30px。

用Math.random()方法使雪花的大小随机，初始水平位置和最终水平位置随机。初始和最终透明度随机。

然后用clone()方法复制雪花，通过jQuery动画方法让其下落，下落时间为固定时间+浏览器高度决定的时间。

源代码：

var minSize=20;
var maxSize=50;
var snow=$("
   
   ").css({
    "position":"absolute",
    "top":"-50px"
}).html("❉");
$(function(){
    var $windoWidth=$(window).width();
    var $windowHeight=$(window).height();
    setInterval(function(){
        var startWidth=Math.random()*$windoWidth;
        var endwidth=Math.random()*$windoWidth;
        var time=3000+Math.random()*$windowHeight;
        var startOpacity=0.7+0.3*Math.random();
        var endOpacity=0.3+0.1*Math.random();
        var size=minSize+Math.random()*(maxSize-minSize);
        snow.clone().appendTo($("body")).css({
            "left":startWidth,
            "color":"#fff",
            "opacity":startOpacity,
            "font-size":size,
        }).animate({
            "top":$windowHeight-30,
            "left":endwidth,
            "opacity":endOpacity
        },time,function(){
            $(this).remove();
        })
    },30)
});