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 相关文章推荐
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
PHP中常用的转义函数
2014/02/28 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
js实现抽奖效果
2017/03/27 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
微笑服务演讲稿
2014/05/13 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
公司职员入党自传书
2015/06/26 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL