看了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. 单一职责原则（Single Responsibility Principle）

    单一职责原则(SRP:The Single Responsibility Principle) 一个类应该有且只有一个变化的原因. There should never be more than on ...

  2. 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 ...

  3. MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性

    返回目录 对于一个JS对象来说,如果希望将所有属性进行监视,在之前我们需要一个个对属性添加ko.observable方法,而有了Mapping插件后,它可以帮助我们这件事． 在Mapping出现之前 ...

  4. Atitit 马尔可夫过程（Markov process） hmm隐马尔科夫。 马尔可夫链，的原理attilax总结

    Atitit 马尔可夫过程(Markov process) hmm隐马尔科夫. 马尔可夫链,的原理attilax总结 1. 马尔可夫过程1 1.1. 马尔科夫的应用 生成一篇"看起来像文章的 ...

  5. C#设计模式-工厂模式

    引入人.工厂.和斧子的问题 原始社会时,劳动社会基本没有分工,需要斧子的人(调用者)只好自己去磨一把斧子,每个人拥有自己的斧子,如果把大家的石斧改为铁斧,需要每个人都要学会磨铁斧的本领,工作效率极低. ...

  6. Android 坐标系和 MotionEvent 分析、滑动

    1.Android坐标系 在Android中,屏幕最左上角的顶点作为Android坐标系的原点,这个点向左是X轴正方向,这个点向下是Y轴正方向. 系统提供了getLocationOnScreen(in ...

  7. VUX 移动前端框架使用文档

    VUX 移动前端框架使用文档 https://owlaford.gitbooks.io/vux-mobile-framework/content/index.html

  8. QQ表情动图，增加写博客的乐趣

    QQ表情动图,增加写博客的乐趣 body{margin:0px;}

  9. linux下编译安装curl

    linux下编译安装curl 1.下载curl git clone https://github.com/curl/curl.git 2.在curl目录下生成configure文件 ./buldcon ...

  10. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...