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雪花特效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS实现炫酷雪花飘落效果

    用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overflow: hidden; user-select: none; -webkit-user-select: none; } .snowAnimation { animation: snow 5s infinite linear; -webkit-animation: snow 5s infinite

  • 使用js实现雪花飘落效果

    使用js实现雪花飘落效果

    今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head>  <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var

  • jQuery实现雪花飘落效果

    本文实例为大家分享了jQuery实现雪花飘落效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现雪花飘落</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js&qu

  • javascript实现雪花飘落效果

    圣诞节快到了相信许多公司的前端都在会收到一个需求,那就是做一个关于圣诞节的专题,而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画,当然我们公司也不例外,下面就是本人用js写的一小段雪花秀啦: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="Content-Type

  • JS实现的雪花飘落特效示例

    JS实现的雪花飘落特效示例

    本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html <!DOCTYPE html> <html> <head> <title> Canvas - 雪花特效 </title> <meta charset="utf-8"> <style> *{ margin:0px; padding:0px; } .myCanvas{ fl

  • JavaScript实现动态网页飘落的雪花

    JavaScript实现动态网页飘落的雪花

    本文实例为大家分享了JavaScript实现动态网页飘落雪花的具体代码,供大家参考,具体内容如下 设计思路: 1.定义一定数量的雪花层,每层包含一个雪花: 2.雪花水平方向左右摇摆则是Math.sin()方法,正弦函数: 3.雪花垂直方向则是采用自加方法每次增加一定距离: 4.雪花每个大小不一: 采用的方法如下: Math.ceil()方法:返回大于等于其数字参数的最小整数,如Math.ceil(3.4)=4: Math.random()方法:返回介于0和1之间的随机数(含0但不包括1): cl

  • 使用javascript实现雪花飘落的效果

    看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome. 2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快. 3.向文档中添加元素直接改成通过JS代码创建元素对象的方式. 实现思路: 1.初始化生成10个div,全都采用绝对定位

  • JavaScript实现雪花飘落效果特效

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

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • JS实现模拟风力的雪花飘落效果

    本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • OpenGL Shader实例分析（7）雪花飘落效果

    OpenGL Shader实例分析（7）雪花飘落效果

    研究了一个雪花飘落效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0", 2D) = "white" {} iChannelReso

  • IOSdrawRect实现雪花飘落效果

    IOSdrawRect实现雪花飘落效果

    本文实例为大家分享了IOSdrawRect实现雪花飘落效果的具体代码,供大家参考,具体内容如下 绘制原理: 雪花效果最主要的思路就是在于循环产生带雪花图片的imageView, 产生的雪花的imageview的 x.y.宽.下落的速度都是随机的,这个可以用随机数来产生数据. 实现代码: #import <UIKit/UIKit.h> @interface HHFSnowflakeFallingView : UIView /** * 快速创建一个雪花飘落效果的view * * @param bg

  • JS和JQuery实现雪花飘落效果

    JS和JQuery实现雪花飘落效果

    很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式. 我们先来看一下需要实现的雪花效果: 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 解释 setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setT

  • 手写简单的jQuery雪花飘落效果实例

    手写简单的jQuery雪花飘落效果实例

    前言 最近闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿来用了,改起来更是容易. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>雪花飘落</title> </head> <

  • python实现雪花飘落效果实例讲解

    在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教大家如何利用pygame模块实现雪花飘落的效果吧,总共都用不到40行代码就可以实现哦,希望对你们有所帮助 第一步:我们先打开我们的pycharm软件,然后新建一个Python文件 第二步:建立好文件之后,我们在编辑页面输入以下代码: import pygame import sys #导入模块 im

随机推荐