javascript实现下雪效果【实例代码】
作者：jingxian 时间：2024-05-25 15:18:40
原理 :
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,下雪
0
投稿猜你喜欢
python 爬虫请求模块requests详解
2022-09-06 01:33:32
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2022-12-25 02:55:30
python学习之hook钩子的原理和使用
2023-08-01 15:55:20
Python判断三段线能否构成三角形的代码
2023-01-21 19:44:25
Python xml、字典、json、类四种数据类型如何实现互相转换
2023-10-17 17:36:20
Mac Homebrew安装的MySQL无法远程登录的解决
2024-01-14 12:12:56
Python实现统计给定列表中指定数字出现次数的方法
2023-02-04 09:50:29
在ASP.NET 2.0中操作数据之十九：给编辑和新增界面增加验证控件
2024-05-09 09:04:01
Python 面向对象 成员的访问约束
2021-05-16 20:55:53
Java用正则表达式实现${name}形式的字符串模板实例
2023-08-05 14:10:01
轻松实现js弹框显示选项
2024-05-08 09:32:51
不用script仅用css编写无限级弹出菜单
2008-04-24 14:03:00
python判断设备是否联网的方法
2022-05-03 12:34:55
微信小程序封装多张图片上传api代码实例
2024-04-25 13:13:31
Firefox Bug: inline/inline-block的间隙
2009-11-03 13:20:00
让你一文弄懂Pandas文本数据处理
2023-07-17 19:12:08
Python简单的制作图片验证码实例
2022-08-13 12:47:05
Python List remove()实例用法详解
2022-11-24 17:40:18
在windows10上安装mysql详细图文教程
2024-01-18 04:39:42
Matplotlib 绘制饼图解决文字重叠的方法
2023-06-12 22:23:06
