原理:

1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。

2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div

3、好像不够完善勿喷

效果预览:http://wjf444128852.github.io/demo02/snow/index.html

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>雪花飞舞</title>

    <link rel="stylesheet" href="css/index.css">

    <script src="js/move.js"></script>

</head>

<body>

    <div class="snow_parent" id="js_sonw">

    </div>

</body>

</html>

CSS代码

*{

    margin:;

    padding:;

    list-style: none;

    border: none;

}

body{

    width: 100%;

    height:600px;

    background:#000;

}

.snow_parent{

    position: relative;

    width: 100%;

    height:100%;

    overflow: hidden;

    margin: 0 auto;

}

.snow_parent div.parent{

    background-image: url(../img/snow.png);

    float: left;

    -webkit-transform: scale(.1);

    -moz-transform: scale(.1);

    -o-transform: scale(.1);

    -ms-transform: scale(.1);

    transform: scale(.1);

    position: absolute;

}

.snow_one{

    width: 180px;

    height: 180px;

    background-position:0 0;

    background-repeat: no-repeat;

    left:-70px;

    top: -95px;

}

.snow_two{

    width: 140px;

    height: 140px;

    background-position:-220px -18px;

    left:-30px;

    top: -75px;

}

.snow_three{

    width:150px;

    height: 150px;

    background-position:-400px -15px;

    left:-20px;

    top: -80px;

}

.snow_four{

    width: 160px;

    height: 160px;

    background-position:-10px -206px;

}

.snow_four{

    left:-10px;

    top: -85px;

}

JS代码:

/*

    creatBy jiucheng 2016-4-24

*/

window.onload=function(){

    init();

}

// 创建DIV

function creatDiv(){

    // 创建DIV并追加到父元素

    var snowDiv=document.createElement("div");

    document.getElementById("js_sonw").appendChild(snowDiv);

    // 让创建DIV的class为随机，显示不同的雪花

    var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"];

    var index=Math.floor(Math.random()*whatName.length);

    snowDiv.className=whatName[index];

    // 获取该DIV的left属性值(随机的)并赋值给创建的DIV

    var whatLeft=getLeft()+'px';

    snowDiv.style.left=whatLeft;

    return snowDiv;

}

// 获取随机left属性值

function getLeft(){

    // 获取该DIV的最大left属性值即父元素的宽度

    var eleParent=document.getElementById("js_sonw");

    // 获取父元素的所有style样式

    var style=window.getComputedStyle(eleParent);

    // CSS中的left是负数这里得减去下

    var maxWidth=parseInt(style.width)+70;

    // 让创建的DIV的left为随机值

    var randomLeft=Math.floor(Math.random()*maxWidth);

    return randomLeft;

}

// 让其向下移动

function moveDown(){

    // 获取移动对象

    var moveElem=creatDiv();

    // 获取移动对象的所有style属性值

    var eleStyle=window.getComputedStyle(moveElem);

    // 获取它的top属性值

    var eleTop=parseInt(eleStyle.top);

    // 设置定时器动态改变移动对象的top属性值

    var t=setInterval(function(){

        eleTop++;

        // 把新的top值付给移动对象

        moveElem.style.top=eleTop+"px";

        // 当下落到屏幕的高度后停止定时器并把该移动对象从父元素删除

        if(eleTop>=window.innerHeight){

            clearInterval(t);

            document.getElementById("js_sonw").removeChild(moveElem);

        }

    },10);//下落速度没10毫秒下落1px

}

function init(){

    // 动态获取并设置body的高度

    document.body.style.height=window.innerHeight+"px";

    // 每500毫秒创建一个移动对象并执行移动函数

    var t=setInterval(function(){

        moveDown();

    },100);

}

javascript实现下雪效果的更多相关文章

  1. 再次推荐一款逼真的HTML5下雪效果

    再次推荐一款逼真的下雪效果 效果图: 效果描述:之前推荐过一款下雪的jQuery插件之前的那款下降速度比较缓慢,今天推荐的这个下降速度比较快,大雪哇 使用方法:1.将index.html中的样式复制到 ...

  2. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  4. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  5. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  6. JavaScript实现动画效果

    说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...

  7. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  8. PS快速制作下雪效果

    PS快速制作下雪效果 具体的制作步骤如下: 1.打开PS,打开素材,打开窗口-动作 2.创建新动作,参数如下图 3.回到图层,建立一个图层,填充黑色,如下图 4.滤镜-像素化-点状化,参数如下图 5. ...

  9. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

随机推荐

  1. struts.xml的编辑

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  2. python django基础（一）

    Django简介:Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的框架模式,即模型M,视图V和控制器C.不过在Django实际使用中,Django更关注的是模型(Mod ...

  3. SQL 数据库管理---公司培训

    一.实例 一个SQL的服务引擎就是一个SQL实例,每装一次SQL就会产生一次实例. 实例分为命名实例和默认实例,一台Windows服务器可以有多个SQL实例,但是只能有一个默认实例. 不同的实例之间相 ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. 学用MVC4做网站六后台管理:6.1.3管理员修改密码

    6.1.3修改密码 需要两个action.一个是点击修改密码的链接要显示修改密码的分部视图(对话框形式):另一个是提交的处理action. 1.打开[AdministratorController]添 ...

  6. Android仿微信拍摄短视频

    近期做项目需要添加上传短视频功能,功能设置为类似于微信,点击开始拍摄,设置最长拍摄时间,经过研究最终实现了这个功能,下面就和大家分享一下,希望对你有帮助. 1.视频录制自定义控件: /** * 视频播 ...

  7. android表白app

    一.前言 马上就要520和521了,是不是还有像我一样的单身狗啊.我就知道有,所以这两天简单写了这个小程序(其实是替别人写的),虽然我并不会用去骗女孩子(因为最近太忙了,实习完之后要搞毕设,要搞论文啊 ...

  8. 用 namspace 隔离 DHCP 服务 - 每天5分钟玩转 OpenStack（90）

    Neutron 通过 dnsmasq 提供 DHCP 服务,而 dnsmasq 如何独立的为每个 network 服务呢? 答案是通过 Linux Network Namespace 隔离,本节将详细 ...

  9. SQL Server-数据库架构和对象、定义数据完整性（二）

    前言 本节我们继续SQL之旅,本节我们如题来讲讲一些基本知识以及需要注意的地方,若有不妥之处,还望指出,简短的内容,深入的理解,Always to review the basics. 数据库架构和对 ...

  10. 通过setTimeout来取消因大量计算造成的网页卡顿

    js是单线程的,所以有些大量计算的操作会占用线程资源,导致页面卡住. 今天遇到这样一个场景,选择一个下拉框之后,对数据进行筛选,这个过程中有大量计算,点了selecte的option之后,option ...