javascript实现雪花飘落效果

最新推荐文章于 2024-04-22 13:50:33 发布
置顶 最新推荐文章于 2024-04-22 13:50:33 发布
阅读量5.3k 收藏 11
点赞数 4
分类专栏： jq js 文章标签： 动画 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxs520/article/details/78842472
版权
js 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
jq
3 篇文章 1 订阅
订阅专栏
作者：旺仔
圣诞节快到了相信许多公司的前端都在会收到一个需求，那就是做一个关于圣诞节的专题，而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画，当然我们公司也不例外，下面就是本人用js写的一小段雪花秀啦： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="jquery-1.8.3.min.js"></script>
	</head>
	<style>
		html{
			max-width: 720px;
			
		}
		body{
			width: 100%;
			height: 100%;
			margin: 0 auto;
			overflow-x: hidden;
		}
		.snow{
			width: 100%;
			height: 100%;
			background: pink;
			overflow: hidden;
		}
		.snow_img{
			position: absolute;
			top: -50px;
			margin-left: 1px;
		}
	</style>
	<body>
		<div class="snow"></div>
		<script>
		$(function(){
			$('body').css("height",$(window).height())
			var wid=$(".snow").width();
			var html_snow="<img src='snow.png' class='snow_img'>";
			setInterval(function(){$(".snow").append(html_snow);snowFlow();},100);
			function snowFlow(){
				$(".snow_img").each(function(index){
					var snow_time=(Math.random()*10+4)*1000;
					var wid_snow=Math.floor(Math.random()*40+5)+'px';
	                var float_left=Math.random()*wid*2-wid+"px";
					var wid_left=Math.random()*wid+"px";
				    if( $(this).css("margin-left")==1+"px"){
					$(this).css("margin-left",wid_left);
					}
					if($(this).width()==0 || $(this).width()==50 ){
						$(this).width(wid_snow);
					}
					$(this).animate({top:800+"px",left:float_left,},snow_time);
					if($(this).offset().top==800){
		                $(this).remove();
					}
				})
			}
		});

	</script>
	</body>
</html>

代码很简单，都是运动用js的一些基础知识点做出来的，主要是随机数和一些判断。就这么简单。代码不是重点，重点是思维，有了思维你自然就可以做出来了。下面是效果图：
                                                                      
想看动态效果的自己复制代码运行就可以了。欢迎给优化建议~
旺仔520
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
VUE动态雪花飘落
qq_45958710的博客
08-07 2836
VUE动态雪花 css代码 #Snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0, 191, 255,0.4); pointer-events: none; } JavaScript代码 /雪花Start/ (function() { var canvas = document.createElement(‘canvas’); document.body.a
简单说 JavaScript实现雪花飘落效果
WJM_Aunt
11-26 6776
说明这是实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。 效果图解释setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 var timerId = setTimeout(func|code, delay
JS实现雪花飘落特效效果
这里是博客标题
09-15 1万+
1、概述： 以任意图片作为背景，在背景上添加雪花下落的特效效果，此处使用随机颜色、随机大小的彩色雪花实现。 2、效果实现功能： （1）雪花随机出现并随机消失； （2）雪花出现时大小随机； （3）雪花颜色随机； （4）雪花颜色逐渐变淡并消失； （5）雪花消失后删除其对象，减轻系统负担。 3、实现原理： 采用<canvas></canvas>画布标签实现，在画...
jQuery实现雪花飘落效果
wangzhneg123的博客
02-28 2349
效果展示： 源码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jquery实现雪花飘落&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquer
Three 雪花飘落案例
最新发布
n_229397218的博客
04-22 394
ThreeJS 粒子系统中，THREE.Points是用来创建点的类，也用来批量管理粒子，基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数，geometry(几何体)和material(材质)，几何体参数用来设置粒子的位置坐标，而材质参数用来设置粒子的外观。
使用js实现雪花飘落效果
m0_61480985的博客
11-05 990
这里我们需要用到的技术有css,html,js,主要还是js部分实现雪花飘落效果。
给网站加上雪花特效
文龙刚的博客
11-04 241
给网站加上雪花特效
使用javascript实现雪花飘落的效果
10-24
本文主要介绍了使用javascript实现雪花飘落的特效，虽然网上有很多，不过都是比较陈旧了，兼容性不是太好，于是动手写一个，把思路和实现代码都分享给大家。
css3简单实现页面中出现雪花飘落效果
热门推荐
喵大嗷的博客
12-22 1万+
快要到圣诞节了，浏览了常去看的学习网站，发现那个网站多了一层雪花飘落的遮罩层，感觉挺有假日气氛的。就自己尝试写了个简单的雪花飘落的遮罩层，大致效果如下： 雪花是透明背景的图片，通过css动画来调整雪花图片位置，来实现雪花飘落的动效。为了突出雪花，body的背景色设置成了黑色。。。其实雪花就只是一个遮罩层，下面的背景应该是原来的网页，自己模拟的就只写雪花效果 话不多说了，上代码<style>
页面雪花飘动效果（京东提取）
01-18
非常逼真的页面雪花飘动效果，是京东上面包机页面的，效果非常逼真，层次感非常明显！还有鼠标互动效果。所以花了点时间给给提取了出来。加jquery大概164K左右。IE9以上支持万恶的IE，谷歌火狐全支持。
圣诞节雪花飘落jQuery特效.zip
07-11
代码效果：圣诞节雪花飘落jQuery特效是一款基于jquery实现的雪花飘落网页装饰特效。
JavaScript 实现雪花效果
小虫虫的博客
12-26 3480
JavaScript一、实现功能二、展示1.代码展示2.效果展示总结 一、实现功能 （1）添加一个背景图片； （2）用js语言实现雪花飘落效果； （3）使用setInterval定时器每800毫秒创建一个雪花； （4）把每一个雪花作为参数传进动态下落的方法中即可。 二、展示 1.代码展示 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met.
Vue使用雪花算法生成随机ID
qq_45634989的博客
10-18 3798
Vue使用雪花算法生成随机ID
使用canvas实现雪花效果
小鹏要逆袭的博客
12-25 1905
本文记载了如何使用canvas来实现雪花效果： 效果图如下： 本demo设计到的知识点有canvas的状态的保存于恢复，canvas的绘制径向渐变，使用html提供的被誉为神器的requestAnimationFrame   html主要代码如下： &lt;canvas class="myblog" id="mycanvas"&gt; &lt;/canvas&gt; 主要的js代...
html5雪花飘落代码JS特效
weixin_30471561的博客
12-03 2569
http://www.lmlblog.com/405.html 转载于:https://www.cnblogs.com/fanting/p/10056901.html
vue实现雪花飘落特效
09-16
### 回答1： 可以使用 HTML5 canvas 元素来实现雪花飘落的动画效果。你可以在 canvas 中绘制雪花的图形，然后使用 JavaScript 实现动画效果。 具体来说，你可以使用 setInterval 或 requestAnimationFrame 方法来不断更新雪花的位置，从而达到飘落的效果。你还可以通过设置速度、大小和旋转角度来控制雪花的飘落效果。 下面是一个简单的示例，展示了如何使用 canvas 和 JavaScript 实现雪花飘落的动画效果： ```html <canvas id="canvas" width="600" height="400"></canvas> <script> // 获取 canvas 元素 var canvas = document.getElementById('canvas'); // 获取 canvas 的上下文 var ctx = canvas.getContext('2d'); // 雪花的图形 var snowflake = "❅"; // 雪花的数组 var flakes = []; // 创建雪花对象的构造函数 function Snowflake() { // 雪花的位置 this.x = 0; this.y = 0; // 雪花的速度 this.vx = 0; this.vy = 0; // 雪花的大小 this.radius = 0; // 雪花的旋转角度 this.rotation = 0; } // 初始化雪花对象 function createSnowflakes() { flakes = []; for (var i = 0; i < 200; i++) { var flake = new Snowflake(); flakes.push(flake); } } // 更新雪花对象的位置 function updateSnowflakes() { for (var i = 0; i < flakes.length; i++) { var flake = flakes[i]; flake.x += flake.vx; flake.y += flake.vy; // 当雪花飘出屏幕 ### 回答2： Vue实现雪花飘落特效的关键是利用Vue组件和CSS动画。以下是一个简单的示例代码： 1. 在Vue组件中定义一个data属性，用于存储雪花的数量和位置信息。 ```javascript data() { return { snowflakes: [] } } ``` 2. 在Vue组件的mounted钩子函数中设置定时器，定时更新雪花的位置。 ```javascript mounted() { setInterval(() => { this.updateSnowflakes(); }, 100); } ``` 3. 在updateSnowflakes方法中更新每个雪花的位置信息，并将新的位置存储到data属性中。 ```javascript updateSnowflakes() { const { innerWidth, innerHeight } = window; const snowflakes = []; for (let i = 0; i < this.snowflakeNum; i++) { const x = Math.random() * innerWidth; const y = Math.random() * innerHeight; snowflakes.push({ x, y }); } this.snowflakes = snowflakes; } ``` 4. 在Vue组件的template中循环渲染每个雪花，并设置它们的位置。 ```html <template> <div class="snow-container"> <div v-for="(snowflake, index) in snowflakes" :key="index" class="snowflake" :style="{ top: snowflake.y + 'px', left: snowflake.x + 'px' }" ></div> </div> </template> ``` 5. 在CSS中设置雪花的样式，并利用CSS动画实现飘落效果。 ```css .snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .snowflake { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; animation: snowfall 10s infinite; } @keyframes snowfall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } ``` 通过以上的代码，就能够实现简单的雪花飘落特效。当Vue组件加载后，定时器会不断更新雪花的位置，使其看起来像是在飘落。同时，利用CSS动画的特性，实现雪花从顶部到底部的过渡效果。 ### 回答3： 实现雪花飘落特效可以使用Vue和CSS动画结合实现。具体步骤如下： 1. 在Vue的页面中，先定义一个父容器，用来包裹所有的雪花元素。可以使用`<div>`标签，并设置好宽高以及其他样式。 2. 在Vue的data属性中定义一个保存所有雪花信息的数组，每个雪花都包含其位置和其他属性，例如`{top: 0, left: 0, size: 0, speed: 0}`。 3. 使用Vue的生命周期钩子函数，例如created或mounted，在页面加载完成后，通过循环生成一定数量的雪花对象，并将其加入到雪花数组中。 4. 使用`v-for`指令将雪花数组中的每个元素渲染为一个具体的雪花元素，在循环中设置每个雪花元素的初始样式和位置。 5. 使用CSS的`@keyframes`定义一个动画效果，用来控制雪花元素的动态效果，例如下落效果。在动画中设置元素的起始位置和终止位置，以及动画的持续时间和循环次数。 6. 在雪花元素上添加样式，包括宽高、背景颜色、边框等，以及动画的名称和持续时间。使用Vue的动态绑定，将每个雪花元素与其对应的位置和其他属性绑定起来。 7. 在Vue的methods中，定义一个方法来更新雪花元素的位置。通过计算每个雪花的top和left值，实现其在父容器中的移动效果。 8. 使用Vue的定时器函数，例如setInterval，定时触发更新雪花元素位置的方法。 经过以上步骤，就可以通过Vue和CSS动画实现雪花飘落的特效了。每个雪花元素会根据其设定的位置和动画效果，以及随机生成的其他属性值，形成飘落的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值