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

看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下。

就把图片改成雪花图,完成一个雪花飘下的效果。

并且,其中有些内容比较陈旧了,那么就学者改掉吧。

包括:

1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome。

2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快。

3.向文档中添加元素直接改成通过JS代码创建元素对象的方式。

实现思路:

1.初始化生成10个div,全都采用绝对定位,每个div中放一个雪花图片,设置好宽高,并保存在数组中,便于后面下雪的函数直接操作。

2.初始化每个div的横坐标和纵坐标,总要给雪花一个下落的起始位置吧。

3.初始化为每个雪花都设一个纵向的下落步长,一个横向的摆动步长,这样每个雪花都会以不同的速度下落和摆动。

4.做一个下雪的函数,每10秒调一下该函数,每调一次该函数,就是控制每个雪花在纵向下落一个自身的步长,横向的摆动通过正弦函数算出一个正弦值后乘以幅度,这样雪花下落就是按照正弦波形的方式进行。

图片可以网上随便找。

以下代码兼容IE8+,Chrome。

//图片的过程中,横坐标的轨迹是以一点为中心的正弦曲线

//利用了setTimeout函数完成了动画的功能

//图片

var snowsrc="雪花.png"

//雪花个数

var no = 10;

//声明变量,xp表示横坐标,yp表示纵坐标>

var dx, xp, yp;

//声明变量,am表示左右摆动的幅度,stx表示横坐标的偏移步长,sty表示纵坐标的步长>

var am, stx, sty;

{

//获取当前窗口的宽度

clientWidth = document.body.clientWidth;

//获取当前窗口的高度

clientHeight = document.body.clientHeight;

}

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 snowFlakes = new Array();

for (i = 0; i < no; ++ i) {

dx[i] = 0;

//第i个图片的横坐标初始值

xp[i] = Math.random()*(clientWidth-50);

yp[i] = Math.random()*clientHeight;//第i个图片的纵坐标初始值

am[i] = Math.random()*20;         //第i个图片的左右摆动的幅度

stx[i] = 0.02 + Math.random()/10; //第i个图片x方向的步长

sty[i] = 0.7 + Math.random();     //第i个图片y方向的步长

//生成一个容纳雪花图片的div,并设置其绝对坐标

var snowFlakeDiv = document.createElement('div');

snowFlakeDiv.setAttribute('id', 'dot'+ i);

snowFlakeDiv.style.position = 'absolute';

snowFlakeDiv.style.top = 15;

snowFlakeDiv.style.left = 15;

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

var snowFlakeImg = document.createElement('img');

snowFlakeImg.setAttribute('src', snowsrc);

snowFlakeImg.style.width = 30;

snowFlakeImg.style.height = 30;

//将雪花div加入到document中,并通过数组保存

snowFlakeDiv.appendChild(snowFlakeImg);

document.body.appendChild(snowFlakeDiv);

snowFlakes[i] = snowFlakeDiv;

}

function snow() {

for (i = 0; i < no; ++ i) {

//第i个图片的纵坐标加上步长

yp[i] += sty[i];

//如果新坐标超过了屏幕下沿,重置该图片的信息,包括横坐标、纵坐标以及x方向的步长和y方向的步长

if (yp[i] > clientHeight-50) {

//重新赋值图片的横坐标

xp[i] = Math.random()*(clientWidth-am[i]-30);

//重新赋值图片的纵坐标

yp[i] = 0;

}

dx[i] += stx[i];//dx变量加上一个步长

//直接操作数组中对应的雪花div

var snowFlakeDiv = snowFlakes[i];

//更新图片的纵坐标

snowFlakeDiv.style.top = yp[i];

//更新图片的横坐标

snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);

}

//设定动画刷新的时间周期

setTimeout("snow()", 10);

}

//调用snowIE()函数

snow();

以上就是全部代码了,效果还是挺棒的,具体的解释请看注释,这里就不多废话了,希望对大家能有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/567240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java飞机大战分数累加代码_JAVA 基础编程练习题39 【程序 39 分数累加】

39 【程序 39 分数累加】题目&#xff1a;编写一个函数&#xff0c;输入 n 为偶数时&#xff0c;调用函数求 1/21/4...1/n,当输入 n 为奇数时&#xff0c;调用函数 1/11/3...1/npackage cskaoyan;public class cskaoyan39 {org.junit.Testpublic void sum() {java.util.Scanner…

分块排序算法 java_十大经典排序算法最强总结(含JAVA代码实现)

转载自&#xff1a;https://www.cnblogs.com/guoyaohua/p/8600214.html0、排序算法说明0.1 排序的定义对一序列对象根据某个关键字进行排序。0.2 术语说明稳定&#xff1a;如果a原本在b前面&#xff0c;而ab&#xff0c;排序之后a仍然在b的前面&#xff1b;不稳定&#xff1a;如…

synchronized锁升级_synchronized详解以及锁的膨胀升级过程

点击上方"码之初"关注&#xff0c;选择"设为星标"与精品技术文章不期而遇来源&#xff1a;www.cnblogs.com/cxiaocai/p/12189848.html架构之路远且艰辛&#xff0c;但是学习的脚步始终不能停止&#xff0c;今天聊一聊synchronized。synchronized是jvm内部的…

地铁看java书女生_地铁上背单词的女孩

公历一月底的成都&#xff0c;几乎已经到了成都这座城市一年当中最冷的时候了。早上出门的时候天几乎是全黑的&#xff0c;我骑着自行车前往地铁站&#xff0c;在寒风中我不禁缩了缩脖子。因为我上班比较远&#xff0c;所以我出门比较早&#xff0c;这个时候街上的行人还很少&a…

python crm_Python CRM项目一

1 from django.db importmodels2 from django.contrib.auth.models importUser3 #Create your models here.4 classCustomer(models.Model):5 客户信息表6 name models.CharField(max_length32,nullTrue,blankTrue)7 qq models.CharField(max_length64,uniqueTrue)8 qq_name …

python arcgis批量绘图_ARCGIS中Python实现批量裁剪

《ARCGIS中Python实现批量裁剪》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《ARCGIS中Python实现批量裁剪(1页珍藏版)》请在人人文库网上搜索。1、程序代码&#xff1a;pythonview plaincopyprint?1. importarcpy2. arcpy.CheckOutExtension(spatial)3. arcpy.gp.…

python123自定义幂函数_python基础之函数

python 函数函数是组织好的&#xff0c;可重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段。函数能提高应用的模块性&#xff0c;和代码的重复利用率。你已经知道Python提供了许多内建函数&#xff0c;比如print()。但你也可以自己创建函数&#xff0c;这…

java 搜索引擎 关键词高亮_和我一起打造个简单搜索之SpringDataElasticSearch关键词高亮(示例代码)...

前面几篇文章详细讲解了 ElasticSearch 的搭建以及使用 SpringDataElasticSearch 来完成搜索查询&#xff0c;但是搜索一般都会有搜索关键字高亮的功能&#xff0c;今天我们把它给加上。系列文章环境依赖本文以及后续 es 系列文章都基于 5.5.3 这个版本的 elasticsearch &#…

python词汇网络分析_8个Python高效数据分析的技巧!

文章来源于网络来源&#xff5c;CSDN这篇文章介绍了8个使用Python进行数据分析的方法&#xff0c;不仅能够提升运行效率&#xff0c;还能够使代码更加“优美”。定义某种列表时&#xff0c;写For 循环过于麻烦&#xff0c;幸运的是&#xff0c;Python有一种内置的方法可以在一行…

改变php二维数组的值_php如何修改二维数组中的值?

php修改二维数组中值的方法&#xff1a;1、通过【for($i 0; $i < count(Array()); $i)】语句修改&#xff1b;2、通过foreach($users as &$user)语句修改。php修改二维数组中值的方法&#xff1a;1、二维数组可以通过for($i 0; $i < count(Array()); $i)这种形式…

华为python673集_python库-collections模块Counter类

Counter类主要是用来跟踪值出现的次数。它是一个无序的容器类型&#xff0c;以字典的键值对形式存储&#xff0c;其中元素作为key&#xff0c;其计数作为value。demo:all_words [] # 列表里面是汉字(可重复)counter Counter(all_words) # 返回 dict Counter类的目的是用来跟踪…

php下载 微信头像图片_php保存微信用户头像到本地或者服务器的完美方案!

//方法一&#xff1a;//推荐用该方法$header array(User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0,Accept-Language: zh-CN,zh;q0.8,en-US;q0.5,en;q0.3,Accept-Encoding: gzip, deflate,);$urlhttp://wx.qlogo.cn/mmopen/vi_3…

php 预防循环发短信_php短信接口发送短信失败,罪魁祸首原来在这里

随着国民经济的高速发展&#xff0c;短信的应用也逐渐商业化&#xff0c;很多企业、商家开始使用php短信接口来进行推广、营销或内部管理&#xff0c;只是个别的商家在应用php短信接口的时候却遇到了短信发送失败的现象&#xff0c;这到底是因为商家操作有误&#xff0c;还是因…

python实时显示温度变化_python实时温度绘制

我目前正在做一个项目&#xff0c;它需要实时监控各种量&#xff0c;如温度、压力、湿度等。我正在采用一种方法&#xff0c;即使用matplotlib和drwnow绘制一个图形。在HOST "localhost"PORT 4223UID1 "tsJ" # S1from tinkerforge.ip_connection import…

jlabel字怎么变化_怎样才能把字写好?详解最科学的练字方法及步骤

一&#xff1a;正确的学习之路1&#xff1a;临帖从古到今&#xff0c;临帖是学习书法最基本的方法&#xff0c;没有一个书法家是没有临过帖的。2&#xff1a;专注专注学一个书法家的字&#xff0c;专心致志&#xff0c;认真临写&#xff0c;持之以恒&#xff0c;直到形同神似。…

php取指定文件夹图片大小,php获取某文件夹的大小

// 获取文件夹大小function getDirSize($dir){$handle opendir($dir);while (false!($FolderOrFile readdir($handle))){if($FolderOrFile ! "." && $FolderOrFile ! ".."){if(is_dir("$dir/$FolderOrFile")){$sizeResult getDirSize…

python lncrna_lncRNA分析

目前人们对lncRNA认识还处在初级阶段&#xff0c;lncRNA起初被认为是基因组转录的“噪音”&#xff0c;是RNA聚合酶II转录的副产物&#xff0c;不具有生物学功能。然而大量研究表明&#xff0c;lncRNA在细胞核内、核外&#xff0c;通过染色质修饰&#xff0c;转录调控&#xff…

ubuntu 缺少php安装包,ubuntu 16.04 lts安装php环境和composer依赖包管理

安装环境1.安装之前先更新系统1 sudo apt update2.安装Apache21 sudo apt install apache23.安装PHP1 sudo apt install php2 sudo apt-get install libapache2-mod-php4.安装MySQL1 sudo apt install mysql-server php7.0-mysql2 sudo apt-get install mysql-client3 mysql_se…

找不到具有指定id_JAVA如何整合es指定字段不分词搜索?

一、问题在做一个需求的时候&#xff0c;需要按照电话号码查询用户关系&#xff0c;所以我这边先讲相关信息同步到es&#xff0c;但是电话号码是加密的&#xff0c;所以显示的字符串是杂乱的&#xff0c;既有字母&#xff0c;又有斜杠等号等字符&#xff0c;在进行分词查询的时…

php 解析java map,java_java遍历Map的几种方法分析,本文实例分析了java遍历Map的几 - phpStudy...

java遍历Map的几种方法分析本文实例分析了java遍历Map的几种方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;Java代码&#xff1a;Map mapnew HashMap();map.put("username", "qq");map.put("passWord", "123");map.put(…