下雪了 javascript实现雪花飞舞


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下

原理:

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

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

3、好像不够完善勿喷

效果预览:http://wjf444128852.github.io/demo02/snow/index.html

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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JS验证不重复验证码
Feb 10 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
基于node实现websocket协议
Apr 25 #Javascript
Bootstrap每天必学之导航组件
Apr 25 #Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
javascript断点调试心得分享
Apr 23 #Javascript
基于 Node.js 实现前后端分离
Apr 23 #Javascript
javascript学习指南之回调问题
Apr 23 #Javascript
探寻JavaScript中this指针指向
Apr 23 #Javascript
You might like
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue注册组件的几种方式总结
2018/03/08 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
使用Python构造hive insert语句说明
2020/06/06 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
副总经理岗位职责
2014/03/16 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
承诺函格式模板
2015/01/21 职场文书
2015年纪委工作总结
2015/05/13 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android