下雪了 javascript实现雪花飞舞

作者:九成 时间:2024-05-02 16:16:12 

本文实例为大家分享了雪花飞舞效果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);
}
标签:js,下雪,雪花飞舞
0
投稿

猜你喜欢

  • python3音乐播放器简单实现代码

    2022-06-12 04:43:14
  • css行高:line-height属性详解

    2008-06-24 11:42:00
  • js经验分享 JavaScript反调试技巧

    2023-07-13 07:53:04
  • PHP中判断变量为空的几种方法分享

    2024-06-05 09:35:25
  • 推荐:怎么用javascript进行拖拽

    2007-09-21 20:14:00
  • Python 2.7中文显示与处理方法

    2021-06-14 16:07:39
  • Python实现读取txt文件中的数据并绘制出图形操作示例

    2021-07-21 17:01:15
  • 在Django的View中使用asyncio的方法

    2022-04-10 13:16:41
  • Python列表删除的三种方法代码分享

    2022-10-26 19:13:35
  • php绘制圆形的方法

    2023-10-29 17:31:52
  • Python实现自动登录百度空间的方法

    2023-11-11 09:11:23
  • 教你用python从日期中获取年、月、日和星期等30种信息

    2023-05-06 22:32:38
  • Centos7 安装 PHP7最新版的详细教程

    2023-10-16 21:14:12
  • python保存二维数组到txt文件中的方法

    2022-03-06 23:32:24
  • Hadoop 文件系统命令行基础详解

    2023-08-31 13:57:03
  • 使用pyinstaller打包django的方法实现

    2021-04-10 21:58:11
  • MySQL的 DDL和DML和DQL的基本语法详解

    2024-01-15 06:40:43
  • document.all与WEB标准

    2008-03-16 14:28:00
  • Python Scapy随心所欲研究TCP协议栈

    2023-06-10 23:12:29
  • (100-1)% 的内容是导航

    2008-01-11 19:23:00
  • asp之家 网络编程 m.aspxhome.com