jquery/zepto 圣诞节雪花飞扬
下载地址:
http://www.html5tricks.com/jquery-html5-christ-snow.html
演示地址:
http://www.html5tricks.com/jquery-html5-christ-snow.html
个人的demo:
新建并且引用以下js文件:
(function($){
$.snowfall = function(element, options){
var defaults = {
flakeCount : 35,
flakeColor : '#ffffff',
flakeIndex: 999999,
minSize : 1,
maxSize : 2,
minSpeed : 1,
maxSpeed : 5,
round : false,
shadow : false,
collection : false,
collectionHeight : 40,
deviceorientation : false
},
options = $.extend(defaults, options),
random = function random(min, max){
return Math.round(min + Math.random()*(max-min));
}; $(element).data("snowfall", this); // Snow flake object
function Flake(_x, _y, _size, _speed, _id)
{
// Flake properties
this.id = _id;
this.x = _x;
this.y = _y;
this.size = _size;
this.speed = _speed;
this.step = 0;
this.stepSize = random(1,10) / 100; if(options.collection){
this.target = canvasCollection[random(0,canvasCollection.length-1)];
} var flakeMarkup = $(document.createElement("div")).attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id}).css({'width' : this.size, 'height' : this.size, 'background' : options.flakeColor, 'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'fontSize' : 0, 'zIndex' : options.flakeIndex}); if($(element).get(0).tagName === $(document).get(0).tagName){
$('body').append(flakeMarkup);
element = $('body');
}else{
$(element).append(flakeMarkup);
} this.element = document.getElementById('flake-' + this.id); // Update function, used to update the snow flakes, and checks current snowflake against bounds
this.update = function(){
this.y += this.speed; if(this.y > (elHeight) - (this.size + 6)){
this.reset();
} this.element.style.top = this.y + 'px';
this.element.style.left = this.x + 'px'; this.step += this.stepSize; if (doRatio === false) {
this.x += Math.cos(this.step);
} else {
this.x += (doRatio + Math.cos(this.step));
} // Pileup check
if(options.collection){
if(this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y){
var ctx = this.target.element.getContext("2d"),
curX = this.x - this.target.x,
curY = this.y - this.target.y,
colData = this.target.colData; if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] !== undefined || curY+this.speed+this.size > this.target.height){
if(curY+this.speed+this.size > this.target.height){
while(curY+this.speed+this.size > this.target.height && this.speed > 0){
this.speed *= .5;
} ctx.fillStyle = "#fff"; if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] == undefined){
colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] = 1;
ctx.fillRect(curX, (curY)+this.speed+this.size, this.size, this.size);
}else{
colData[parseInt(curX)][parseInt(curY+this.speed)] = 1;
ctx.fillRect(curX, curY+this.speed, this.size, this.size);
}
this.reset();
}else{
// flow to the sides
this.speed = 1;
this.stepSize = 0; if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){
// go left
this.x++;
}else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){
// go right
this.x--;
}else{
//stop
ctx.fillStyle = "#fff";
ctx.fillRect(curX, curY, this.size, this.size);
colData[parseInt(curX)][parseInt(curY)] = 1;
this.reset();
}
}
}
}
} if(this.x > (elWidth) - widthOffset || this.x < widthOffset){
this.reset();
}
} // Resets the snowflake once it reaches one of the bounds set
this.reset = function(){
this.y = 0;
this.x = random(widthOffset, elWidth - widthOffset);
this.stepSize = random(1,10) / 100;
this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100;
this.speed = random(options.minSpeed, options.maxSpeed);
}
} // Private vars
var flakes = [],
flakeId = 0,
i = 0,
elHeight = $(element).height(),
elWidth = $(element).width(),
widthOffset = 0,
snowTimeout = 0; // Collection Piece ******************************
if(options.collection !== false){
var testElem = document.createElement('canvas');
if(!!(testElem.getContext && testElem.getContext('2d'))){
var canvasCollection = [],
elements = $(options.collection),
collectionHeight = options.collectionHeight; for(var i =0; i < elements.length; i++){
var bounds = elements[i].getBoundingClientRect(),
canvas = document.createElement('canvas'),
collisionData = []; if(bounds.top-collectionHeight > 0){
document.body.appendChild(canvas);
canvas.style.position = 'absolute';
canvas.height = collectionHeight;
canvas.width = bounds.width;
canvas.style.left = bounds.left + 'px';
canvas.style.top = bounds.top-collectionHeight + 'px'; for(var w = 0; w < bounds.width; w++){
collisionData[w] = [];
} canvasCollection.push({element :canvas, x : bounds.left, y : bounds.top-collectionHeight, width : bounds.width, height: collectionHeight, colData : collisionData});
}
}
}else{
// Canvas element isnt supported
options.collection = false;
}
}
// ************************************************ // This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole page
if($(element).get(0).tagName === $(document).get(0).tagName){
widthOffset = 25;
} // Bind the window resize event so we can get the innerHeight again
$(window).bind("resize", function(){
elHeight = $(element).height();
elWidth = $(element).width();
}); // initialize the flakes
for(i = 0; i < options.flakeCount; i+=1){
flakeId = flakes.length;
flakes.push(new Flake(random(widthOffset,elWidth - widthOffset), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed), flakeId));
} // This adds the style to make the snowflakes round via border radius property
if(options.round){
$('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize});
} // This adds shadows just below the snowflake so they pop a bit on lighter colored web pages
if(options.shadow){
$('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});
} // On newer Macbooks Snowflakes will fall based on deviceorientation
var doRatio = false;
if (options.deviceorientation) {
$(window).bind('deviceorientation', function(event) {
doRatio = event.originalEvent.gamma * 0.1;
});
} // this controls flow of the updating snow
function snow(){
for( i = 0; i < flakes.length; i += 1){
flakes[i].update();
} snowTimeout = setTimeout(function(){snow()}, 30);
} snow(); // Public Methods // clears the snowflakes
this.clear = function(){
$(element).children('.snowfall-flakes').remove();
flakes = [];
clearTimeout(snowTimeout);
};
}; // Initialize the options and the plugin
$.fn.snowfall = function(options){
if(typeof(options) == "object" || options == undefined){
return this.each(function(i){
(new $.snowfall(this, options));
});
}else if (typeof(options) == "string") {
return this.each(function(i){
var snow = $(this).data('snowfall');
if(snow){
snow.clear();
}
});
}
};
})(zepto);
使用方式,请务必在页面完全加载之后使用以下代码,其他具体参数请查看演示地址的源码
$(document).snowfall({round : true, minSize: 2, maxSize:4}); // add rounded
jquery/zepto 圣诞节雪花飞扬的更多相关文章
- JS实现IOS风格对话框 jquery / zepto
Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- jQuery / zepto ajax 全局默认设置
jQuery / zepto 的 $.ajax 方法需要配置很多选项, 有些是很常用的每个 ajax 请求都要用到的, 可以全局设置, 避免每次都写. 注意: 此处用的 jQuery 版本是 1.8. ...
- 5分钟搞定jQuery+zepto.js+面向对象插件
今天分享一下快速使用jQuery+zepto.js的技巧,需要的记得收藏 1.jQuery的引入:本地下载jQuery(后面简称jq)的源文件,开发版本使用非min版,线上使用min版,zepto.j ...
- jquery,zepto插件编写相关
1. $.fn.pluginName = function(opt){}就是为jquery的prototype定义了函数, 这样, 任何一个jquery对象都可以使用这个成员函数, 这种写法直观明了, ...
- delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件
delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
- 迷你版jQuery——zepto核心源码分析
前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQue ...
- Jquery网站下雪花的效果
代码如下: <script type="text/javascript" src="jquery.min.js"></script> & ...
随机推荐
- Java学习笔记__异常机制_try_catch_finally_return执行顺序
package cn.xiaocangtian.Exception; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...
- wpf 悬浮窗口的实现
又到了写点东西的时候,因为有了新的收获,所以用随笔来记录下自己的成长.话不多说,正入主题. 最近又遇到一个新的需求,有一组控件,需要悬浮显示在面板的边缘上,刚开始的时候,是不显示的,点击后显示,然后再 ...
- 常用的HTML代码
一.文字1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>..........</fon ...
- FPGA 开发笔记 点滴
1.添加包含的文件或参数文件(define.v)的方式:如果文件在工程目录下的一个文件夹下,则可用 `include "../文件夹名/define.v", 文件和工程载同一目录 ...
- PHP预定义接口之 ArrayAccess
最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...
- Vs2012 创建项目失败 未找到与约束ContractName
刚开始使用vs2012的时候,创建项目失败,后来找到原因 ,是KB2840642V2的原因,于是 卸载之.vs正常
- Java中的URL类
Java的网络类可以让你通过网络或者远程连接来实现应用.而且,这个平台现在已经可 以对国际互联网以及URL资源进行访问了.Java的URL类可以让访问网络资源就像是访问你本地的文件夹一样方便快捷.我们 ...
- H5(一)
HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) ...
- Quartz定时调度框架
Quartz定时调度框架CronTrigger时间配置格式说明 CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年 ...
- jquery函数理解与运用
javascript中有多种不用的方式去理解函数,函数类似于我们以前学过的数学函数,但是在程序设计中,我是按照下面的方式进行理解: 函数的理解: 函数是一个代码块,内容被包含在函数内,通常我们是把一些 ...