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实现更改表格行顺序示例
Apr 30 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
微信开发 微信授权详解
Oct 21 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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制作静态网站的模板框架(二)
2006/10/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
学习Vue组件实例
2018/04/28 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
《长征》教学反思
2014/04/27 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
python基础之错误和异常处理
2021/10/24 Python