看了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前端学习笔记---实现雪花飘落的效果的更多相关文章

  1. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  2. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  3. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  4. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  5. web前端学习笔记：文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...

  6. web前端学习笔记（二）---Django

    [前言]前面(一)学习了web的基础知识,介绍到了MVC,项目使用一个Django框架. Django book:https://code.ziqiangxuetang.com/django/djan ...

  7. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  8. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  9. Web前端学习笔记之BootStrap

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

随机推荐

  1. JavaScript字符转Unicode,顺便说句：GitHub的Oh no页面很亮

    遇到个输不出来的字符怎么办,因为输不出来的字符一般又是不常见大多数时候连名字也喊不出来的,所以想问百度谷歌大大也不大可能.如果是小白用户肯定会去把输入法软盘打开切换到其他键盘一个一个找.即使有搜狗输入 ...

  2. node.js module初步理解

    在开发一个复杂的应用程序的时候,我们需要把各个功能拆分.封装到不同的文件,在需要的时候引用该文件.没人会写一个几万行代码的文件,这样在可读性.复用性和维护性上都很差,几乎所有的编程语言都有自己的模块组 ...

  3. SQL面试题

    Student(S#,Sname,Sage,Ssex) 学生表     S#:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别Course(C#,Cname,T#) 课程表     ...

  4. IOS Runtime-初识runtime（一）

    苹果公布了runtime的源码,可以从地址下载:http://www.opensource.apple.com/tarballs/objc4/ object-c程序在启动的时候,需要一个准备时间,这个 ...

  5. 爱上MVC~在Views的多级文件夹~续~分部页的支持

    回到目录 之前写的一篇文章,主要针对View视图,它可以放在N级目录下,不必须非要在views/controller/action这种关系了,而在程序运行过程中,发现分页视图对本功能并不支持,原因很简 ...

  6. vue隐藏APP启动时显示的{{}}

    vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个

  7. 《C与指针》第八章练习

    本章问题 1.根据下面给出的声明和数据,对每个表达式进行求值并写出它的值.在对每个表达式进行求值时使用原先给出的值(也就是说,某个表达式的结果不影响后面的表达式).假定ints数组在内存中的起始位置是 ...

  8. require.js笔记

    笔记参考来源:阮一峰  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html   1. 浏览器端的模块只能采用“异步加载”方式 = ...

  9. 快速入门系列--WCF--03RESTFUL服务与示例

    之前介绍了基于SOAP的Web服务,接下来将介绍基于REST的轻量级的Web服务. REST(Representational State Transfer)与技术无关,代表一种软件架构风格,可以成为 ...

  10. Grunt 安装与配置环境

    当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这 ...