javascript实现下雪效果

最新推荐文章于 2024-07-18 14:14:43 发布
原创 最新推荐文章于 2024-07-18 14:14:43 发布 · 2.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #border #image #脚本 #文档

本文介绍了一种在网页上实现雪花飘落效果的方法。通过定时更新雪花图像的位置属性，模拟雪花下落及轻微摆动的现象。该方案利用了HTML与JavaScript，通过自定义属性控制每个雪花元素的行为。
 设计一个页面，页面显示时具有雪花飘落的效果。
  • 设计思路
    • 定时改变雪花图像的样式属性Top和Left值，使Top值每次增加一点，产生雪花落下的效果；而对于Left值，基本不变，但每次有很小幅度的增大或减少，产生雪花摆动效果，使用sin()函数可使这种摆动在方向上是连续的，从而产生雪花飘落的效果。
    • 在函数snowStart(dot_number)中，通过执行document.write(snow_dot_html)为页面添加dot_number个雪花标记,并且每个雪花具有相同的id,使得脚本可以以snow_dot[i]形式访问每个雪花图像。
    • 函数snowing()用于移动一次雪花点,以模拟雪花飘落效果。own_Y、own_offsetY、dot.own_am等不是<IMG>对象的标准HTML属性，但是通过赋值(如dot.own_Y = 0;)可以为对象分配自定义属性。自定义属性own_Y和own_offsetY控制雪花点与顶边的距离，而own_am、own_X、own_dx和own_dx_offset控制雪花点与左边的距离。pixelTop和pixelLeft是样式style对象以象素为单位的top和left值。语句“self.setTimeout("snowing()",10);”控制snowing()函数每0.01秒执行一次，即每个雪花点每0.01秒移动一次。
      1. <HTML>
      2. <HEAD>
      3. <TITLE>雪花飘落</TITLE>
      4. <SCRIPT language="javascript">
      5. <!--
      6. function snowStart(dot_number)
      7. {//启动雪花飘落过程(参数dot_number:雪花点数目)
      8.     var i,snow_dot_html,dot_image;
      9.     dot_image = "snow_dot.GIF";//雪花点图像
      10.     snow_dot_html = '<IMG id="snow_dot" border="0" src="' + dot_image;
      11.     snow_dot_html += '" style="position: absolute; left: -1; top: -1" width="35" height="36">';
      12.     for(i=0;i<dot_number;i++)
      13.     {//为当前文档添加多个表示雪花的IMG标记,并给出相同的id,以便以数组形式访问这些图像
      14.         document.write(snow_dot_html);
      15.     }
      16.     snowing();
      17. }
      19. function snowing()
      20. {//移动雪花点的位置,以模拟雪花飘落
      21.     var body_width,body_height,i,dot;
      22.     body_width = document.body.clientWidth;
      23.     body_height = document.body.clientHeight;
      24.     for(i=0;i<snow_dot.length;i++)
      25.     {//移动每个雪花
      26.         dot = snow_dot[i];//某个雪花对象
      27.         if(dot.style.pixelTop<0 || dot.style.pixelTop > (body_height - dot.height - 5))
      28.         {//如果雪花点落在可视浏览区之外，则重新设置其初始位置
      29.             dot.own_Y = 0;  //Y坐标值
      30.             dot.own_offsetY = 0.6 + Math.random();//Y轴方向的偏移量
      31.             
      32.             dot.own_am = Math.random()*20;//(左右)摆动幅度
      33.             dot.own_X = dot.own_am + Math.random()*(body_width - dot.width-dot.own_am-20);
      34.             dot.own_dx = 0;
      35.             dot.own_dx_offset = 0.05 + Math.random()/10; 
      36.         }
      37.         dot.own_dx += dot.own_dx_offset;
      38.         dot.own_Y  +=  dot.own_offsetY;
      39.         dot.style.pixelTop  =  dot.own_Y;
      40.         dot.style.pixelLeft =  dot.own_X + dot.own_am * Math.sin(dot.own_dx);
      41.     }
      42.     self.setTimeout("snowing()",10);
      43. }
      44. //-->
      45. </SCRIPT>
      46. </HEAD>
      48. <BODY>
      50. <SCRIPT language="javascript">
      51. <!--
      52.     snowStart(10);
      53. //-->
      54. </SCRIPT>
      56. </BODY>
      58. </HTML>
sz_bdqn
关注
JavaScript实现下雪效果
qq_60012576的博客
07-23 1027
下雪效果
js 实现下雪效果
12-31
javascript 实现下雪效果,页面背景下雪.
下雪特效(JS源码)
01-11
用JS实现下雪的特效，带背景音乐，雪花形状花瓣不断变化
JavaScript实现下雪(Snow)效果
ξσ Dicky's Blog σξ
12-23 2189
代码1：Happy New YearN = 100; Y = new Array();X = new Array();S = new Array();A = new Array();B = new Array();M = new Array();V = (document.layers)?1:0;iH=(document.layers)?window.innerHeight:window.docu
javascript实现下雪效果【实例代码】
10-22
JavaScript 实现下雪效果是一种常见的网页动态特效，可以增加页面的视觉吸引力，特别是在冬季或节日主题的网页设计中。下面我们将详细讲解如何使用 JavaScript 来实现这个效果。 首先，我们需要理解实现下雪效果的...
javascript实现下雪效果(实例代码)_.docx
10-09
总结来说，JavaScript实现下雪效果主要通过动态创建DOM元素，结合CSS来设定样式，再利用JavaScript定时器更新元素位置，实现动态效果。为了增强用户体验，还可以添加风速控制、雪花密度调节等高级功能，使下雪效果...
用HTML5 + JavaScript实现下雪效果
cnds123的专栏
02-03 3266
通过 CSS 控制背景颜色，JavaScript和 负责实现下雪效果。drawSnowflakes 函数负责绘制雪花，而 moveSnowflakes 函数则更新每个雪花的位置，使它们下落。animate 函数使用 requestAnimationFrame 来创建一个循环，不断绘制和更新雪花，从而实现动态的下雪效果。 改进：加入背景图片，并确保图片等比例缩放以适应浏览器窗口的大小。通过 CSS 控制背景颜色或图片，JavaScript 和 负责动态效果，两者相互独立，
JS特效——下雪
weixin_52580677的博客
01-15 2626
通过JS实现屏幕飘雪 JS实现飘雪特效 //创建雪花元素 function snow() { //获取视窗的宽高 var width = window.innerWidth; var height = window.innerHeight; var snow = document.createElement("div"); //创
javascript下雪效果
12-10
JavaScript实现下雪(Snow)效果 封装为单独的脚本文件,很容易使用
JS网页下雪特效
06-01
JS 网页下雪 特效
js 特效 html 特效 模拟下雪景象
08-20
js 特效 html 特效 模拟下雪景象 js 特效 html 特效 模拟下雪景象
下雪js特效js只需引入即可snow特效
07-13
下雪js特效js只需引入即可snow特效
[js高手之路]html5 canvas动画教程 - 下雪效果
weixin_33851177的博客
10-19 300
利用canvas，实现一个下雪的效果，我们先预览下效果：     我们先分析下这个效果： 1，随机产生雪花 2，雪花的产生不是同时产生，而是有先后顺序的 3，雪花怎么表示 4，怎么源源不断的下雪 5，雪花有大有小 搞清楚上面几个问题之后，这个效果基本上就实现了， 首先，由于这个是全屏效果，我采用动态创建canvas，把整个浏览器的宽与高赋值给canvas 1 ...
javascript canvas 实现下雪效果 圣诞节专用
iMeta
12-29 1348
直接引入以下JS代码就OK 原生JS，不需要JQuery/* http://blog.youkuaiyun.com/jesounao */ function r(a){return a*Math.random()}function s(){return document.createElement("canvas")}function u(){var a,d,e,f;for(p+=0.01,d=Math.si
js简陋下雪特效
insist_LJJ的博客
12-29 261
js简陋下雪特效 <!doctype html> <html> <head> <meta charset="utf-8"> <title>今见下雪特效</title> <style> *{margin:0;padding: 0;} body{background-color:black;} .snow{ ...
js制作下雪特效❉
最新发布
qq_51279669的博客
07-18 535
js屏幕雪花、红包雨效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值