前言

最近无事可做，准备写一个雪花飘落效果，但是没有写太牛逼的特效，大大简化了代码量，所以读代码很容易，用起来也很简单。这对那些白人来说是一种好处，而且很容易阅读和学习。先直接编码，再一个一个解释。可以直接复制粘贴使用，更改起来更容易。

！Doctype HTML HTML头元字符集=' UTF-8 '标题降雪量/标题/头样式类型='文本/CSS '正文{背景3360黑色；高度： 100%；飞越：隐藏；} .xh{cursor:指针；}/style body div class=' bk '/div/body script src=' http : jquery-1 . 8 . 3 . min . js '/script script type=' text/JavaScript ' var minSize=5；//最小字体var maxSize=50//最大字体var newOne=200//生成雪花间隔var flakColor=' # fff//雪花色varflak=$ ('div class=' xh'/div ')。CSS ({position :' absolute '，' top' :' 0px'})。html(“”)；//定义雪花变量dhight=$(窗口)。高度()；//定义视图高度var dw=$(窗口)。宽度()；//定义视图宽度set interval(function(){ var size flak=minsizemath。random()* maxsize；//产生不同大小的雪花var startLeft=math . random()* dw；//雪花生成是一个随机的左值var startopcity=0.7 path . random()* 0.3；//随机透明度var端点top=dhight-100；//雪花停在顶部的位置var endLeft=math . random()* dw；//雪花停止的左边位置var duration full=5000 math。random()* 3000；//雪花以不同的速度落下flak.clone()。appendo($(“body”))。CSS ({'left' : startleft，' opacity' : startopcity，' font-size' : size flak，color':flakColor })。animate({ ' top ' : end position top，' left':endLeft，' apacity':0.1 }、durationfull、function(){ $(this)。remove()})；}，new one)；/script/html就是上面的代码，是不是很简单，你应该说你能达到预期的效果？让我们展示一下下面的效果

以上就是效果。可以用雪花换钱或者其他东西，换背景，加一张圣诞老人等东西的图片。这是一个简单的圣诞页面，其实很酷。

当然，我们也可以加入一些其他的互动效果，把画面变成一个小飞机，然后玩一个飞机格斗的网络游戏，其实很简单，就是加入互动和一些逻辑就可以了。现在我将一步一步解释整个程序设计。

前提总结：我用了jq，但是也可以用原生写，但是jq比较方便，所以我用了jq。

介绍jq 3360 script src=' http : jquery-1 . 8 . 3 . min . js '/脚本，需要根据自己的真实目录编写。介绍时注意两点：

第一，记住一般介绍的话最好放在整个页面的底部，因为页面加载的时候是从上到下加载的。如果在样式上面引入jq，页面加载速度会变慢，影响用户体验。所以放在下面会让风格和图片先加载，有利于用户体验。

其次，在导入时，不要将其放在依赖jq代码下，因为页面是从上到下加载的。如果放在下面，依赖代码找不到jq变量和方法，会报错。

第二，写之前想好需要的变量，然后定义变量：

我们做的是雪花飘落，所以我用* good代替了雪花，所以我们需要知道如何定义雪花，var flak=$ ('div class=' xh'/div ')。CSS ({position :' absolute '，' top' :' 0px'})。html(‘’)//定义一片雪花，那么我们需要思考雪花的属性，知道雪花的几个属性。

1.我们知道下雪时雪花的大小是不一样的，所以在定义雪花的大小时，要用一个最大的雪花大小和一个最小的雪花大小。我们在js指定的函数setinterval中使用一个随机数，让雪花随机生成最大值和最小值之间的大小：

var sizeflak=minSize math . random()*(maxSize-minSize)；//产生不同大小的雪花

2.定义间隔执行功能的间隔。这也可以是未定义的，可以直接编写

3.定义雪花的固定属性颜色和视图宽度。

3.根据之前定义的变量，将变量引入区间循环函数：

到了这一步，就简单多了，因为这个函数每隔几秒就执行一次，所以我们只需要取之前定义的最大值和最小值之间的所有值。然后克隆之前定义的雪花。这里我们将讨论jq和js的克隆

jq的克隆是节点直接的。clone()，这是一种封装的js克隆方法。Js是直接节点。cloneNode(true)，所以你只需要知道它，这样就不会太依赖jq库了。

最后一步：将克隆的节点放入我们的父节点，即视图。我们这里的视图是body，所以直接appendto(body)，然后jq有一个动画api。我们直接用这个api让整个雪花从克隆到移动，然后完成移动

之后将克隆的雪花去掉，从而实现整个雪花下落的效果。

总结：这个页面互动不多，但也包含了一些知识点。总结使用的关键技术。

1.雪花随机落下，随机大小的Math.random()生成一个0-1的随机数

2、使用区间执行函数setInterval(函数(){}，时间间隔)

3.动画，jq的动画功能

4.克隆并删除节点克隆()删除()

我花了半个小时从构思开始写这个dom，然后一点一点讲解构思过程和逻辑思维。转眼已经12点了，我的语言组织能力和打字技术还有待提高。

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。