添加雪花效果

(function(){

var app = app || {};

var Browser = $.browser;

if ($.browser.msie && $.browser.version <= 8) return;

var a = function () {

function r(a) {

return a * Math.random()

}

function s() {

return document.createElement("canvas")

}

function t() {

var a;

for (var d = 0; d < m; d++) a = d < m * .6 ? 0 : d < m * .8 ? 1 : d < m * .9 ? 2 : d < m * .98 ? 3 : 4, o[d] = [r(b), r(c), a]

}

function u() {

var a, d, e, f;

p += .01, d = Math.sin(p);

for (a = 0; a < m; a++) {

f = o[a], e = Math.sin(4 * p + a), f[1] += f[2] / 2 + (2 + e), f[0] += 6 * (d + e / 2) / (10 / f[2]), f[1] > c && (f[1] = -n, f[0] = r(b));

if (f[0] > b || f[0] < -n) d > 0 ? f[0] = -n : f[0] = b;

o[a] = f

}

}

function v() {

var a;

k.fillStyle = l, k.clearRect(0, 0, b, c), k.beginPath();

for (a = 0; a < m; a++) k.drawImage(i[o[a][2]], o[a][0], o[a][1]);

k.fill(), u()

}

function w(a) {

b = window.innerWidth,

c = window.innerHeight,

j !== undefined && (j.width = b, j.height = c, m = b * c / 6e3, l = k.createLinearGradient(0, 0, 0, c), t())

}

function x() {

//window.addEvent("resize", a.resizeHandler, !1),

$(window).resize(function(){

a.resizeHandler();

});

j = document.createElement("canvas"),

j.style.position = "fixed",

j.style.top = "0px",

j.style.left = "0px",

j.style.zIndex = 5e3,

j.style.pointerEvents = "none",

j.id = "canvas_snow",

document.body.appendChild(j),

k = j.getContext("2d"),

k.strokeStyle = "none",

d = s(), e = s(), f = s(), g = s(), h = s(), i = [d, e, f, g, h],

y({

canvas: d,

width: n * .4,

height: n * .4,

color: "#FFF",

soft: .05

}), y({

canvas: e,

width: n * .5,

height: n * .5,

color: "#FFF",

soft: .05

}), y({

canvas: f,

width: n * .6,

height: n * .6,

color: "#FFF",

soft: .3

}), y({

canvas: g,

width: n * .8,

height: n * .8,

color: "#FFF",

soft: .2

}), y({

canvas: h,

width: n,

height: n,

color: "#FFF",

soft: .05

}), w(null), app.snowTimer = setInterval(function () {

q(a.draw)

}, 50)

}

function y(a) {

var b, c, d, e, f, g, h, i, j;

d = a.width || 30, e = a.height || 30, f = d / 2, g = e / 2, i = a.color || "#FFF", h = a.soft || 0, b = a.canvas, b.width = d, b.height = d, c = b.getContext("2d"), c.clearRect(0, 0, d, e), j = c.createRadialGradient(f, g, 0, f, g, f), j.addColorStop(0, i), j.addColorStop(.1, i), j.addColorStop(.85, z(i, h)), j.addColorStop(1, z(i, 0)), c.fillStyle = j, c.fillRect(0, 0, d, e)

}

function z(a, b) {

var c, d, e;

return a = a.replace(/^s*#|s*$/g, ""), a.length === 3 && (a = a.replace(/([0-9a-fA-F])/g, "$1$1")), d = parseInt(a.substr(2, 2), 16), e = parseInt(a.substr(4, 2), 16), c = parseInt(a.substr(0, 2), 16), "rgba(" + c + ", " + d + ", " + e + ", " + b + ")"

}

var b, c, d, e, f, g, h, i = [],

j, k, l, m, n = 20,

o = [],

p = 0,

q = function () {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function (a) {

window.setTimeout(a, 62.5)

}

}();

return {

init: x,

draw: v,

resizeHandler: w

}

}();

(a.init(),setTimeout(function () {

clearTimeout(app.snowTimer), $("#canvas_snow").remove()

}, 120000));

})();

时间: 2024-09-30 20:13:02

添加雪花效果的相关文章

纯代码为网站站点添加雪花飘落效果

<script type="text/javascript"> (function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('?'), documentHeight = $(document).heig

布局添加动画效果

1. 布局添加动画效果 ① 视图 五个按钮 <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&q

街机扫描线之为图片添加扫描效果

为图片添加一些额外效果,会使图片更耐看一些,下面来看看如何为一张普通图片添加扫描效果. 首先是下载软件,可到软件主页下载:街机扫描线_v10(正式版) 看一下制作先后的对比图: 原图效果: 制作后加入了扫描效果的效果图: 用街机扫描线制作这种效果图只需简单的几步操作即可完成,貌似用PS做这种效果图也可以做出来,但是会很复杂.下面说一下制作方法. 1.用任意看图软件或浏览器打开一张需要制作扫描效果的图片,也可直接在网页上制作. 2.下载 街机扫描线 之后解压到任意目录,运行 街机扫描线_v10(正

WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右下角会显示一个窗体,一般情况下该窗体会隐藏停靠在右边,只露出很小部分,当鼠标移动到这个很小部分时,窗体全部显示,显示过程是从右边滑动到左边,当鼠标离开窗体时,窗体需要隐藏在右边,只露出很小部分,隐藏过程是从左边滑动到右边. 实现此类效果我碰到的连个难点是:1.如何判断鼠标离开了窗体?2.窗体显示隐藏

给日志添加&ldquo;复制&rdquo;效果

给日志添加如上效果的实现方法: 在日志编辑页面,源代码中,添加如下代码,包裹住 目标内容style1: <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"></span></div>                     要复制的内容here-</d

cocos2d-x 精灵添加描边效果

学习cocos2d-x 以来一直对里面的shader部分感兴趣,今天正好花了点时间来研究一下精灵的描边效果. 主要参考了子龙山人大神的TestCpp里面例子并结合自己的理解,实现相对比较简单.主要是根据引擎内部自带的shader相关代码来实现的. 好了废话不多说看代码: 1.首先需要打开CCShaderCache.cpp文件修改里面部分代码,添加我们描边的效果. 在此枚举值里面加入:kShaderType_LabelOutline 2.然后在 voidShaderCache::loadDefau

为UIView视图切换添加动画效果

我们定义了一个动画类来实现视图切换的动画效果,这个类只包含一个类方法,可直接调用,具体代码如下: 头文件: + ? 1 2 3 4 5 6 7 8 9 10 11 12 13 #import <Foundation/Foundation.h> @interface ViewAnimation : NSObject /*============================页面切换的方法==============================     View1 表示当前页面     Vi

元素添加外发光效果

.put { -webkit-transition:border linear .2s,-webkit-box-shadow linear .2s; outline:none; border-color:rgba(241,39,242,.6); -webkit-box-shadow:0 0 8px rgba(241,39,232,.3); } rgba:同rgb,后面.6=0.6=alpha,取值0-1 元素添加外发光效果

在 Windows Phone 中,为 Grid 添加 Tilt 效果

在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要让一个 Grid 也具有 Tilt 效果的话,如果直接这么写是不会起作用的: <Grid x:Name="GridGame" toolkit:TiltEffect.IsTiltEnabled="True"> 为什么给按钮这样写是可以的,而Grid就失效了呢?