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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
js实现九宫格布局效果
May 28 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php生成html文件方法总结
2014/12/01 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python比较两个列表是否相等的方法
2015/07/28 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
大学校庆邀请函
2014/01/11 职场文书
交通事故调解协议书
2014/04/16 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
设计师求职信
2014/07/01 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
党员民主生活会材料
2014/12/15 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang