javascript实现下雪效果【实例代码】


Posted in Javascript onMay 03, 2016

原理 :

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

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

3、好像不够完善勿喷

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:0;
  padding:0;
  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实现下雪效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
javascript的列表切换【实现代码】
May 03 #Javascript
jQuery中队列queue()函数的实例教程
May 03 #Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 #Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 #Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 #Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 #Javascript
You might like
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Flask处理Web表单的实现方法
2021/01/31 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
新年联欢会主持词
2014/03/27 职场文书
给老婆道歉的话
2015/01/20 职场文书
品质保证书格式
2015/02/28 职场文书
2016年元旦致辞
2015/08/01 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle