脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 网页特效 → 文字特效 → js雪花特效

JavaScript实现雪花飘落效果特效

 更新时间：2023年01月01日 16:59:44   投稿：yin  
雪，是冬天的灵魂，为大地铺好背景，之后发生的都如梦似幻，就像童话般的存在。冬天没有雪，能难倒程序猿吗，没有雪自己造，这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下

没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽。雪，是冬天的灵魂，为大地铺好背景，之后发生的都如梦似幻，就像童话般的存在。冬天没有雪，能难倒程序猿吗，没有雪自己造，这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; } </style>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script> function snow() { 
        //1、定义一片雪花模板 
        var flake = $("<div>").css({ "position": "absolute", "color": "#fff" }).html("❄"); 
        //获取页面的宽度，利用这个数来算出，雪花开始时left的值 
        var documentWidth = $(document).width(); 
        //获取页面的高度 相当于雪花下落结束时Y轴的位置 
        var documentHieght = $(document).height(); 
        //定义生成一片雪花的毫秒数 
        var millisec = 100; 
        //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花； 
        setInterval(function() { 
            //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置 
            var startLeft = Math.random() * documentWidth; 
            //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置 
            var endLeft = Math.random() * documentWidth; 
            //随机生成雪花大小 
            var flakeSize = 5 + 20 * Math.random(); 
            //随机生成雪花下落持续时间 
            var durationTime = 4000 + 7000 * Math.random(); 
            //随机生成雪花下落 开始 时的透明度 
            var startOpacity = 0.7 + 0.3 * Math.random(); 
            //随机生成雪花下落 结束 时的透明度 
            var endOpacity = 0.2 + 0.2 * Math.random(); 
            //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中 
            flake.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ 
                //执行动画 
                "left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { 
                    //4、当雪花落下后，删除雪花。 
                    $(this).remove(); 
            });
        }, millisec); 
    }; 
    snow(); 
</script>
</body>
</html>

到此这篇关于JavaScript实现雪花飘落效果特效的文章就介绍到这了,更多相关js雪花特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 颜色变换 像字符逐字输入的欢迎词

    颜色变换 像字符逐字输入的欢迎词

    一个炫彩的网页欢迎词，其实就是Javascript文字特效，只不过它是打字与炫彩的结合，在网页的一角放上这效果，给平静的网页增添点动态元素。
    2009-10-10
  • javascript 洒脱飘动的文字

    javascript 洒脱飘动的文字

    飘动的文字，看着还挺自在、洒脱，网上经常见的东西，原来是这么实现的，奉献给大家哦。
    2009-10-10
  • javascript 网页上跳动的文字

    javascript 网页上跳动的文字

    网页上跳动的文字，代码稍复杂，效果挺可爱的，一跳一跳的文字，真逗人！
    2009-10-10
  • 让链接必须按先后顺序点击的JS代码

    让链接必须按先后顺序点击的JS代码

    让链接必须按先后顺序点击的JS代码，用到广告上面比较好，有不少的文字或图片广告有类似效果，点链接的时候需要按顺序，请注意链接地址，写在JS代码里的是真正需要的地址。
    2009-10-10
  • VBScript 实现文字遮罩

    VBScript 实现文字遮罩

    用VBScript捕捉鼠标的移动，然后令光线射向也随着移动，这样就形成了鼠标像光源的效果。
    2009-10-10
  • JavaScript 点击插入文字

    JavaScript 点击插入文字

    JavaScript点击插入文字，在一段文字的任意处点击，会将你时先准备好的文字插入到一段文字中，可能大家不怎么用到，不过感觉很奥妙，希望高手改进成自己想要的效果。
    2009-10-10
  • Js文字背景行如流水特效

    Js文字背景行如流水特效

    行如流水的Js文字背景特效，本人比较喜欢的效果，文字的背景像流水线一样，不断的循环变化，很漂亮哦。
    2009-10-10
  • JavaScript 平滑文字闪烁

    JavaScript 平滑文字闪烁

    基于JavaScript的平滑文字闪烁,不是单纯的闪烁,貌似还带有一点点别的效果,比如淡入/淡出,那些颜色值你是可以变的,改成你想要的,还有闪烁间隔等,都可以修改的.
    2009-10-10
  • javascript 走马灯效果的链接提示

    javascript 走马灯效果的链接提示

    走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。
    2009-10-10
  • JavaScript 炫彩的文字

    JavaScript 炫彩的文字

    炫彩文字，在网页上用一下，会吸引别人的注意力，和CSS不相干，纯粹JavaScript实现的东西，代码不算少，高手在优化一下。
    2009-10-10

最新评论