下雪了 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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
js实现筛选功能
Nov 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
用javascript实现倒计时效果
2021/02/09 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python实现感知机(PLA)算法
2017/12/20 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
python制作微博图片爬取工具
2021/01/16 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
元旦晚会感言
2014/03/12 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年女工委工作总结
2015/07/27 职场文书
外科护士长工作总结
2015/08/12 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫