设为首页收藏本站 国外访客：
切换到窄版

 找回密码
 立即注册
搜索
蔡州手游»论坛 › 网络资源 › 网络源码 › 分享两种圣诞节网页雪花飘落特效JS代码 ...
返回列表 发新帖
查看: 97|回复: 0

分享两种圣诞节网页雪花飘落特效JS代码

[复制链接]
china0396
灌水成绩
16215
62
2037676
主题
帖子
积分

等级头衔

ID : 1

管理员

积分成就 威望 : 999899 点
贡献 : 9999 次
下载币 : 11602 枚
在线时间 : 1353 小时
注册时间 : 2013-9-5
最后登录 : 2026-2-27

发表于 2 小时前 | 显示全部楼层 |阅读模式
免责
长期招聘游戏测试员（无偿）,有兴趣联系站长QQ58493525微信A0396C
免费领取大流量卡,每日更新
蔡州手游APP
源码密码
加入群聊
接手游搭建
下载币
购买服务器


  1. <script type="text/javascript">
  2.     /* 控制下雪 */
  3.     function snowFall(snow) {
  4.         /* 可配置属性 */
  5.         snow = snow || {};
  6.         this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
  7.         this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
  8.         this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
  9.     }
  10.     /* 兼容写法 */
  11.     requestAnimationFrame = window.requestAnimationFrame ||
  12.         window.mozRequestAnimationFrame ||
  13.         window.webkitRequestAnimationFrame ||
  14.         window.msRequestAnimationFrame ||
  15.         window.oRequestAnimationFrame ||
  16.         function(callback) { setTimeout(callback, 1000 / 60); };

  18.     cancelAnimationFrame = window.cancelAnimationFrame ||
  19.         window.mozCancelAnimationFrame ||
  20.         window.webkitCancelAnimationFrame ||
  21.         window.msCancelAnimationFrame ||
  22.         window.oCancelAnimationFrame;
  23.     /* 开始下雪 */
  24.     snowFall.prototype.start = function(){
  25.         /* 创建画布 */
  26.         snowCanvas.apply(this);
  27.         /* 创建雪花形状 */
  28.         createFlakes.apply(this);
  29.         /* 画雪 */
  30.         drawSnow.apply(this)
  31.     }
  32.     /* 创建画布 */
  33.     function snowCanvas() {
  34.         /* 添加 Dom 结点 */
  35.         var snowcanvas = document.createElement("canvas");
  36.         snowcanvas.id = "snowfall";
  37.         snowcanvas.width = window.innerWidth;
  38.         snowcanvas.height = document.body.clientHeight;
  39.         snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
  40.         document.getElementsByTagName("body")[0].appendChild(snowcanvas);
  41.         this.canvas = snowcanvas;
  42.         this.ctx = snowcanvas.getContext("2d");
  43.         /* 窗口大小改变的处理 */
  44.         window.onresize = function() {
  45.             snowcanvas.width = window.innerWidth;
  46.             /* snowcanvas.height = window.innerHeight */
  47.         }
  48.     }
  49.     /* 雪运动对象 */
  50.     function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
  51.         this.x = Math.floor(Math.random() * canvasWidth);   /* x 坐标 */
  52.         this.y = Math.floor(Math.random() * canvasHeight);  /* y 坐标 */
  53.         this.size = Math.random() * flakeSize + 2;          /* 形状 */
  54.         this.maxSize = flakeSize;                           /* 最大形状 */
  55.         this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
  56.         this.fallSpeed = fallSpeed;                         /* 坠落速度 */
  57.         this.velY = this.speed;                             /* Y 方向速度 */
  58.         this.velX = 0;                                      /* X 方向速度 */
  59.         this.stepSize = Math.random() / 30;                 /* 步长 */
  60.         this.step = 0                                       /* 步数 */
  61.     }
  62.     flakeMove.prototype.update = function() {
  63.         var x = this.x,
  64.             y = this.y;
  65.         /* 左右摆动(余弦) */
  66.         this.velX *= 0.98;
  67.         if (this.velY <= this.speed) {
  68.             this.velY = this.speed
  69.         }
  70.         this.velX += Math.cos(this.step += .05) * this.stepSize;

  72.         this.y += this.velY;
  73.         this.x += this.velX;
  74.         /* 飞出边界的处理 */
  75.         if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
  76.             this.reset(canvas.width, canvas.height)
  77.         }
  78.     };
  79.     /* 飞出边界-放置最顶端继续坠落 */
  80.     flakeMove.prototype.reset = function(width, height) {
  81.         this.x = Math.floor(Math.random() * width);
  82.         this.y = 0;
  83.         this.size = Math.random() * this.maxSize + 2;
  84.         this.speed = Math.random() * 1 + this.fallSpeed;
  85.         this.velY = this.speed;
  86.         this.velX = 0;
  87.     };
  88.     // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
  89.     flakeMove.prototype.render = function(ctx) {
  90.         var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
  91.         snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
  92.         snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
  93.         snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找 16 进制的 RGB 颜色代码。 */
  94.         ctx.save();
  95.         ctx.fillStyle = snowFlake;
  96.         ctx.beginPath();
  97.         ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  98.         ctx.fill();
  99.         ctx.restore();
  100.     };
  101.     /* 创建雪花-定义形状 */
  102.     function createFlakes() {
  103.         var maxFlake = this.maxFlake,
  104.             flakes = this.flakes = [],
  105.             canvas = this.canvas;
  106.         for (var i = 0; i < maxFlake; i++) {
  107.             flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
  108.         }
  109.     }
  110.     /* 画雪 */
  111.     function drawSnow() {
  112.         var maxFlake = this.maxFlake,
  113.             flakes = this.flakes;
  114.         ctx = this.ctx, canvas = this.canvas, that = this;
  115.         /* 清空雪花 */
  116.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  117.         for (var e = 0; e < maxFlake; e++) {
  118.             flakes[e].update();
  119.             flakes[e].render(ctx);
  120.         }
  121.         /*  一帧一帧的画 */
  122.         this.loop = requestAnimationFrame(function() {
  123.             drawSnow.apply(that);
  124.         });
  125.     }
  126.     /* 调用及控制方法 */
  127.     var snow = new snowFall({maxFlake:500});
  128.     snow.start();
  129. </script>
复制代码

  1. <script type="text/javascript">
  2. (function($){
  3.   $.fn.snow = function(options){
  4.   var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
  5.   documentHeight   = $(document).height(),
  6.   documentWidth  = $(document).width(),
  7.   defaults = {
  8.     minSize    : 10,
  9.     maxSize    : 20,
  10.     newOn    : 1000,
  11.     flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
  12.   },
  13.   options  = $.extend({}, defaults, options);
  14.   var interval= setInterval( function(){
  15.   var startPositionLeft = Math.random() * documentWidth - 100,
  16.   startOpacity = 0.5 + Math.random(),
  17.   sizeFlake = options.minSize + Math.random() * options.maxSize,
  18.   endPositionTop = documentHeight - 200,
  19.   endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  20.   durationFall = documentHeight * 10 + Math.random() * 5000;
  21.   $flake.clone().appendTo('body').css({
  22.     left: startPositionLeft,
  23.     opacity: startOpacity,
  24.     'font-size': sizeFlake,
  25.     color: options.flakeColor
  26.   }).animate({
  27.     top: endPositionTop,
  28.     left: endPositionLeft,
  29.     opacity: 0.2
  30.   },durationFall,'linear',function(){
  31.     $(this).remove()
  32.   });
  33.   }, options.newOn);
  34.     };
  35. })(jQuery);
  36. $(function(){
  37.     $.fn.snow({
  38.       minSize: 5, /* 定义雪花最小尺寸 */
  39.       maxSize: 50,/* 定义雪花最大尺寸 */
  40.       newOn: 300  /* 定义密集程度，数字越小越密集 */
  41.     });
  42. });
  43. </script>
复制代码


速度, function, flakeSize, fallSpeed
免责
帖子地址打造全网最多免费游戏网站,部分资源失效,私聊站长补
今日来客 列表模式

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|蔡州手游 |网站地图 wapmz.com

GMT+8, 2026-2-27 13:51