JQuery特效之四---飘雪效果

最新推荐文章于 2024-06-23 00:00:25 发布

Eric010101

最新推荐文章于 2024-06-23 00:00:25 发布

阅读量1.1k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/oneil2016/article/details/84643896

版权

JavaWeb 专栏收录该内容

85 篇文章 2 订阅

订阅专栏

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/snow.css"/>
</head>
<body>
    
    
    
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/js/snow.js"></script>
</body>
</html>

css：

*
{

}

body
{
background-color: black;
}

js：

var minSize=5;
var maxSize = 50;
var newOn = 100;//产生雪花的速度
var flakeColor = "#fff";
var flake = $("<div></div>").css({"position":"absolute","top":"-50px"}).html("❄");
$(function(){
var documentWidth = $(document).width();
var documentHeight = $(document).height();
    
    setInterval(function(){
    var startPositionLeft = Math.random()*documentWidth;
        var startOpacity = 0.7 + Math.random()*0.3;
        var endPositionTop = documentHeight;
        var endPostionLeft = Math.random()*documentWidth;
        var durationFall = 2000 + 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":endPostionLeft,
            "opacity":0.5
        },durationFall,function(){$(this).remove();});
    },newOn);
});

Eric010101

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JQuery特效之四---飘雪效果

前端三大组成html构建内容，css美化，js控制交互，jquery是一个常用js库。html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;
复制链接

扫一扫

专栏目录