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获取和设置Select选项的常用方法总结
Jul 04 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
javascript几个易错点记录
Nov 26 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
Yii核心验证器api详解
2016/11/23 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JavaScript延迟加载
2021/03/09 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python编写一个优美的下载器
2018/04/15 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Pycharm修改python路径过程图解
2020/05/22 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
2014年情人节活动方案
2014/02/16 职场文书
发展部经理职责规定
2014/02/22 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
三八节祝酒词
2015/08/11 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书