当前位置:首页 > 日记 > 正文

用javascript实现雪花飘落的效果

用javascript实现雪花飘落的效果
查看javascript网页特效例子,在图片浮出效果的例子,觉得值得学习。

把图片换成雪花,完成雪花的效果。

有些已经过时了,所以把它们除掉。

包括 uff1a

1。左侧和顶部支持的操作只有IE浏览器,必须由Chrome支持。

2。要控制画面的落下过程也要检索元素,不好,即变成数组维护,直接操作数组,以维持对象,而不是更快。

三.将元素直接添加到通过js代码创建元素对象的方式。

实现这个想法:

1。初始化生成10部都是绝对定位。在每个div中放置一张雪花图片,并设置宽度的高度,并保存在数组中,以便可以直接操作紧接着雪的功能。

2。初始化的横坐标与纵坐标的每个div,总是给人一种雪花开始。

三.每个雪花的初始化,我们有一个纵向下降步骤和一个水平摆动步骤,使每个雪花将下降,并以不同的速度摆动。

4。做雪函数,每10秒钟调整一个函数的功能,是控制每个雪花在纵向上的下落,自己一步一步,通过正弦函数的横向摆动来计算一个正弦值乘以振幅,所以雪花的下降是按照正弦法进行的。

这些图片可以在网上找到。

下面的代码是IE8 +兼容,铬。

复制代码代码如下所示:
横轴轨迹过程中的图像是以点为中心的正弦曲线。

/ /使用setTimeout函数实现动画功能

/图片

无功snowsrc =雪花。png

雪数

var = 10;

/ /声明一个变量,XP说的横纵坐标> YP

VaR的DX,XP,YP;

声明说,我 / /变量,摆动幅度,STX偏置的横坐标,纵坐标步>麦粒肿

VaR是、STX、麦粒肿;

{

获取当前窗口宽度

clientwidth = document.body.clientwidth;

获取当前窗口高度

document.body.clientheight自己=;

}

新数组();

新数组();

VaR YP =新的数组();

var =新数组();

VaR STX =新的数组();

VaR的猪圈=新的数组();

雪花=新阵列();

对于(i = 0;i <否;+ i){

0;

的i /初始水平坐标值

XP {我} = Math.random()*(clientwidth-50);

YP {我} = Math.random(*自己); / /初始坐标我画的价值

我是{ } = Math.random(×20); / /摇摆我图像幅度

STX {我} = 0.02 + Math.random( / / / 10);我画X方向步

麦粒肿{我} = 0.7 + Math.random(我); / /图片Y方向步

生成包含div图片的雪花,并设置其绝对坐标

无功snowflakediv = document.createelement('div);

snowflakediv.setattribute('id','dot +我);

snowflakediv.style.position =绝对的;

snowflakediv.style.top = 15;

snowflakediv.style.left = 15;

生成一个雪/图片对象,设置宽度和高度,并加入div

无功snowflakeimg = document.createelement('img);

snowflakeimg.setattribute('src ',snowsrc);

snowflakeimg.style.width = 30;

snowflakeimg.style.height = 30;

Div将被添加到文档,并通过数组。

snowflakediv.appendchild(snowflakeimg);

document.body.appendchild(snowflakediv);

SnowFlakes{i} = snowFlakeDiv;

}

函数雪(){

对于(i = 0;i <否;+ i){

带步的i//纵图

YP {我} =猪圈{我};

如果超过新 /屏幕下沿,复位的图片信息,包括横纵坐标,X方向和Y方向上的一步一步

如果(YP {我} > clientheight-50){

横坐标 /重新分配图

XP {我} = Math.random()*(clientwidth是{我} - 30);

纵坐标分配。

YP {我} = 0;

}

DX {我} = STX {我}; / / DX加变步长

直接操作数组对应于雪分区。

无功snowflakediv =雪花{我};

纵坐标/更新图片

snowflakediv.style.top = YP {我};

横坐标 /更新图片

snowflakediv.style.left = XP {我}是{我} + Math.sin(DX {我});

}

设置刷新周期时间/动画

setTimeout(雪()

}

/ /电话snowie()函数

中岛幸惠();

以上是全部代码,效果很好,具体说明请看注释,这里没有太大的浪费,希望对你有所帮助。

相关文章

画家绘画审美女性插画

画家绘画审美女性插画

插画,画家,女性,电脑软件,本教程将结束画家的使用来绘制审美女性插图。这个教程的题目是救赎,整个构图和画面都很美,画画的难度也很小。推荐一下,希望大家喜欢。 本教程将结束画家的使用来绘制审美女性插图。本教程的题目是救赎,整个构图和画面…

介绍对象的toString()和价值转换功能

介绍对象的toString()和价值转换功能

转换,价值,对象,功能,电脑软件,在Javascript中,对象转换为布尔的操作非常简单:在转换到布尔之后,所有对象都是真的;即使是新布尔(false)之类的对象,在转换为布尔之后仍然是一个对象。 复制代码代码如下所示: 新布尔(false); 如果(x){ console.log(X是真的); }…

画家画镜祈的过程

画家画镜祈的过程

画家,过程,电脑软件,画镜祈,在本教程中,画家学习绘画镜显示inori的用画家的全过程,其中一些是由插画家。然而,作者并没有详细介绍制作过程,要求学习者有画家基础,但本教程非常实用,建议对学画家的朋友有用。 在本教程中,画家学习绘画inorilsquo显…

CDR只产生闪烁和绘图效果(两种方法)

CDR只产生闪烁和绘图效果(两种方法)

闪烁,方法,绘图,两种,效果,本教程是一个简单的方法,使Flash和绘图效果的朋友CDR。教程比较简单。非常适合初学者学习和推荐。 本教程介绍朋友到CDR,制作一个简单的方法来创建Flash和拉丝效果。本教程是一个入门教程,非常适合初学者学习。介绍…

PS图象处理软件过滤器挑选透明的泡

PS图象处理软件过滤器挑选透明的泡

透明,过滤器,图象,处理软件,泡泡,本教程介绍朋友PS图象处理软件滤波器选择气泡的方法把透明的,非常好的教程,你可以通过本教程学习颜色抠图的方法,希望对大家有帮助 本教程主要是朋友介绍PS图象处理软件滤波器选择透明气泡的方法,本教程非常好,…

PHP数组排序中,uksort和排序功能的

PHP数组排序中,uksort和排序功能的

排序,数组排序,功能,电脑软件,PHP,本文阐述了PHP数组排序中的使用,uksort和排序功能,分享给你参考。具体使用情况分析如下: 为阵列中的()函数使用自定义函数对数组进行排序的用户,和示例代码如下: 复制代码如下:函数CMP($ A,$ B)用户定义回调函数 {…

excel2010不能进入湿地解决excel20

excel2010不能进入湿地解决excel20

教程,湿地,电脑软件,当你使用excel2010输入数据,当你要添加斜线,你发现它无法进入。怎么了 excel2010不能进入湿地解决步骤 通过实践,最终解决了该问题的解决方案,具体步骤如下: 1步,打开excel2010,单击菜单栏中的文件菜单栏,选择下面的选项设置,…

画家画了一对水彩画芭蕾舞者。

画家画了一对水彩画芭蕾舞者。

水彩画,画了,画家,舞者,电脑软件,本教程介绍你画一对水彩芭蕾舞者与画家。教程的图片很漂亮,而且教程很难。但它是一个经典场景描述教程的详细描述。 本教程介绍你画一对水彩芭蕾舞者与画家。教程的图片很漂亮,而且教程很难。但它是一个经典…

PS超现实蜘蛛侠3D特效特效屏合成教

PS超现实蜘蛛侠3D特效特效屏合成教

教程,3D,特效,蜘蛛侠,电脑软件,本教程介绍朋友PS合成超级Spiderman 3D效果屏幕的屏幕。教程产生的效果非常真实。作者详细地介绍了它,并推荐像它这样的朋友可以和教程一起学习。 星期一练习!今天的教程3D效果很好,视觉冲击力很强,朋友可以在社…

ajax参数详解详解附例

ajax参数详解详解附例

参数详解,详解,电脑软件,ajax,语境 类型:对象 这个对象用于设置与Ajax相关的回调函数的上下文,也就是说,让回调函数中的这个点指向这个对象。如果不设置此参数,则这将指向调用Ajax请求时传递的选项参数。 就像这样。 $ $ $(这)。AddClass(做); …

人工智能使彩色纸的美丽折纸效果

人工智能使彩色纸的美丽折纸效果

人工智能,效果,美丽,彩色纸,电脑软件,本教程是向您介绍使用人工智能,使五颜六色和五颜六色的纸张效果。这篇论文对论文有很好的效果,课程不难,向前推进,你喜欢的朋友可以一起学习。 本教程是向您介绍的方式,使多彩和美丽的折纸文字由人工智能。…

Javascript的基本概念

Javascript的基本概念

基本概念,电脑软件,Javascript,1。区分案件与案件 一切在ECMAscript(变量,函数名是大小写敏感,运营商)。 例如,变量名称测试和测试代表两个不同的变量, 二、标识符 所谓标识符是指一个变量、一个函数、一个属性或一个函数的参数的名称: 第一个字符…