当前位置：网站首页>【无标题】

【无标题】

2022-07-24 03:18:00 【-等天黑】

JavaScript实现下雪效果

1.效果图

在这里插入图片描述

2.css代码


<style type="text/css">
			body {
				background-color: #000000;
				margin: 0;
			}

			img {
				position: absolute;
			}
</style>

3.js代码

js代码需要引入jQuery文件

<body>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			setInterval(function() {
    
				var img = $(`<img src="img/圣诞节-雪花.png" >`); //创建img(雪花)标签
				$("body").append(img); //在body页面插入img标签 
				var size = Math.random() * 5 + 8; //设置img随机大小
				var width = $(window).width(); //获取页面宽度
				var left = Math.random() * (width - size); //图片到页面左侧随机距离
				var top = $(window).height() - size; //页面高度
				img.css({
    
					"width": size + "px", //css样式 
					"left": left + "px"
				});
				img.animate({
     //图片从顶部过渡到页面底部
					"top": top
				}, size * 150)
				setTimeout(function() {
     //定时器清除雪花,也可以不设置
					img.remove();
				}, 6000)
			}, 20)
		</script>
	</body>