web前端学习笔记---实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下。
就把图片改成雪花图,完成一个雪花飘下的效果。
并且,其中有些内容比较陈旧了,那么就学者改掉吧。
包括:
1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome。
2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快。
3.向文档中添加元素直接改成通过JS代码创建元素对象的方式。
实现思路:
1.初始化生成10个div,全都采用绝对定位,每个div中放一个雪花图片,设置好宽高,并保存在数组中,便于后面下雪的函数直接操作。
2.初始化每个div的横坐标和纵坐标,总要给雪花一个下落的起始位置吧。
3.初始化为每个雪花都设一个纵向的下落步长,一个横向的摆动步长,这样每个雪花都会以不同的速度下落和摆动。
4.做一个下雪的函数,每10秒调一下该函数,每调一次该函数,就是控制每个雪花在纵向下落一个自身的步长,横向的摆动通过正弦函数算出一个正弦值后乘以幅度,这样雪花下落就是按照正弦波形的方式进行。
图片可以网上随便找。
以下代码兼容IE8+,Chrome。
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//图片的过程中,横坐标的轨迹是以一点为中心的正弦曲线
//利用了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();
</script>
</BODY>
web前端学习笔记---实现雪花飘落的效果的更多相关文章
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- web前端学习笔记:文本属性
今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...
- web前端学习笔记(二)---Django
[前言]前面(一)学习了web的基础知识,介绍到了MVC,项目使用一个Django框架. Django book:https://code.ziqiangxuetang.com/django/djan ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- Web前端学习笔记之jQuery基础
0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- Web前端学习笔记之BootStrap
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
随机推荐
- JavaScript使用DeviceOne开发实战(一) 配置和起步
2015 年 9 月 底,DeviceOne Release发布.至此,DeviceOne 基本完成了对多端的支持.基于 DeviceOne 可以: HTML5.Android.iOS.Windows ...
- Android移动APP开发笔记——Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例
引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用 ...
- 【OpenGL(SharpGL)】支持任意相机可平移缩放的轨迹球实现
[OpenGL(SharpGL)]支持任意相机可平移缩放的轨迹球 (本文PDF版在这里.) 在3D程序中,轨迹球(ArcBall)可以让你只用鼠标来控制模型(旋转),便于观察.在这里(http://w ...
- How to install java and eclipse on linux
First of all, download from the website of java. I download 'jdk-8u102-linux-i586.tar.gz' unzip it t ...
- knh
市场调研,分析—— 决定是否创业 不要再极度的沉默无言.宅.无存在感,无趣,难熬..
- 使用SqlBulkCopy类来批量复制数据
DataTable dt = new DataTable(); dt.Columns.Add("id", typeof(string)); ; i < ; i++) { Da ...
- H5 调用摄像头
WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API. 1.getUserMedia 要播放摄像头的影像,首先需 ...
- WebApi系列~dynamic让你的省了很多临时类
回到目录 dynamic这个动态类型早在.net3.5时就已经出现了,当时是伴随的Linq一起让我们认识的,但在使用时总觉得有点别扭,因为它是internal的,所以不能跨程序集使用,这对于分层开发的 ...
- Atitit 发帖机实现(2)---usrQBN2243 文本解析到对象协议规范
Atitit 发帖机实现(2)---usrQBN2243 文本解析到对象协议规范 文本内容 ###注释 标题:标题标题标题标题标题1 人数:5 月薪:2000-3000 内容: 内容内容内 容内容内容 ...
- fir.im Weekly - 给女朋友的 iOS 开发教程
俗话说:技多不压身,功到自然成.本期 fir.im Weekly 收集的热度资源,大部分关于Android.iOS 开发工具和源码,还有一些有关设计的 Tips ,希望对你有帮助. 给女朋友的 iOS ...