漫天的雪花飘~~

最新推荐文章于 2021-02-26 14:37:44 发布

lucky芬

最新推荐文章于 2021-02-26 14:37:44 发布

阅读量533

点赞数

分类专栏：练手小案例

本文链接：https://blog.csdn.net/daimomo000/article/details/78678396

版权

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    background-color: #000;
    overflow: hidden;
}

/*分析
1.雪片产生的时候，距离浏览器的左边（left）是随机的
2.每个雪片下降的速度是随机的
3.雪片的大小
4.雪片下落之后，距离浏览器的左边是随机的
5.雪片透明度*/
var minSize = 5;
var maxSize = 50;
var newOn = 100;//单位是毫秒
var flakeColor = "#fff";
var flake = $("<div></div>").css({"position":"absolute","top":"-50px"}).html("❄");
$(function(){
    var documentHeight=$(document).height();
    var documentWidth=$(document).width();
    setInterval(function(){
        var startPositionLeft = Math.random()*documentWidth;
        var startOpacity = 0.7 + Math.random()*0.3;
        var endPositionTop = documentHeight;
        var endPositionLeft = Math.random()*documentWidth;
        var durationFall = 5000+Math.random()*3000;
        var sizeFlake =minSize +Math.random()*maxSize;
        flake.clone().appendTo("body").css({
            "left":startPositionLeft,
            "opacity":startOpacity,
            "font-size":sizeFlake,
            "color":flakeColor
        }).animate({
            "top":endPositionTop,
            "left":endPositionLeft,
            "opacity":0.5
        },durationFall,function(){//回调函数,当雪片落在底部的时候让其消失
            $(this).remove();
        });
    },newOn);
});

lucky芬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
漫天的雪花飘~~

*{ margin:0; padding:0;}body{ background-color: #000; overflow: hidden;}/*分析1.雪片产生的时候，距离浏览器的左边（left）是随机的2.每个雪片下降的速度是随机的3.雪片的大小4.雪片下落之后，距离浏览器的左边是随机的5.雪片透明度*/var minSize = 5;
复制链接

扫一扫