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

本文实例为大家分享了JavaScript实现动态网页飘落雪花的具体代码,供大家参考,具体内容如下

设计思路:

1.定义一定数量的雪花层,每层包含一个雪花;

2.雪花水平方向左右摇摆则是Math.sin()方法,正弦函数;

3.雪花垂直方向则是采用自加方法每次增加一定距离;

4.雪花每个大小不一;

采用的方法如下:

Math.ceil()方法:返回大于等于其数字参数的最小整数,如Math.ceil(3.4)=4;

Math.random()方法:返回介于0和1之间的随机数(含0但不包括1);

clientWidth属性:对象(元素)的宽度;

clientHeight属性:对象(元素)的高度;

setTimeout(“JavaScript语句”,time(单位:毫秒)):2个参数,设置一个超时计时器,在执行该方法时开始计时,经过time时间后执行JavaScript语句。

完整代码如下:

<html>
<head>
<meta charset="utf-8">
<title>飘落的雪花</title>
</head>
<script language="javascript">
<!--
var snow_size=new Array();
var snow_color=new Array();
var num=50;//雪花数量
var smallest=5;//雪花最小尺寸
var largest=30;//雪花最大尺寸
var dx=new Array();//雪花左右振动幅度大小
var xp=new Array();//水平位置
var yp=new Array();//垂直位置
var am=new Array();
var stx=new Array();//水平位移
var sty=new Array();//垂直位移
var doc_width;
var doc_height;
function makeSize(){//定义每个雪花尺寸
    return smallest+Math.random()*largest;
    }
function makeColor1(){//定义白色雪花
    for(i=0;i<num;++i){
       snow_color[i]='#ffffff';
      }
    }
function makeColor2(){//定义彩色雪花
    for(i=0;i<num;++i){
        A=Math.ceil(Math.random()*255);
        B=Math.ceil(Math.random()*255);
        C=Math.ceil(Math.random()*255);
        snow_color[i]='rgb('+A+','+B+','+C+')';
        }
    }
function init(){//初始化
    doc_width=document.body.clientWidth;
    doc_height=document.body.clientHeight;
    makeColor1();  //白色雪花
    //makeColor2();  //彩色雪花
    for(i=0;i<num;++i){
        dx[i]=0;
        xp[i]=Math.random()*(doc_width-40);
        yp[i]=Math.random()*doc_height;
        am[i]=Math.random()*20;
        snow_size[i]=makeSize();
        stx[i]=0.02+Math.random()/10;
        sty[i]=0.7+Math.random();
        document.write("<div id='snow_"+i+"' style='position:absolute;z-index:eval(30"+i+");visibility:visible;top:15px;left:15px;font-size:"+snow_size[i]+";color:"+snow_color[i]+"'>*</div>");
        }
    }
function snow(){
    for(i=0;i<num;++i){
        yp[i]+=sty[i];
        if(yp[i]>doc_height-50){//如果雪花到达底部
            xp[i]=Math.random()*(doc_width-am[i]-20);
            yp[i]=0;//垂直位置重置为0
            stx[i]=0.02+Math.random()/10;
            sty[i]=0.7+Math.random();
            }
            dx[i]+=stx[i];
            document.getElementById("snow_"+i).style.top=yp[i];
            document.getElementById("snow_"+i).style.left=xp[i]+am[i]*Math.sin(dx[i]);
        }
    setTimeout("snow()",10);//间隔10毫秒调用一次snow函数
    }
//-->
</script>
<body id="myBody" bgcolor="#bbbbbb">
</body>
<script language="javascript">
<!--
init();
snow();
//-->
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-06-21

原生JS实现的雪花飘落动画效果

本文实例讲述了原生JS实现的雪花飘落动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>www.jb51.net JS下雪动画</title> &

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

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实现雪花飘落效果

今天用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

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"> <

Js Snowflake(雪花算法)生成随机ID的实现方法

1.snowflake-id插件 import SnowflakeId from "snowflake-id"; const guid = num => { const id= new SnowflakeId(); return id.generate(); }; 2.原生使用 var Snowflake = /** @class */ (function() { function Snowflake(_workerId, _dataCenterId, _sequence) {

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

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

下雪了 javascript实现雪花飞舞

本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下 原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 效果预览:http://wjf444128852.github.io/demo02/snow/index.html HTML代码: <!DOCTYPE html> <html lang="en&qu

JS和JQuery实现雪花飘落效果

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

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

原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

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

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

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