未加星标

jQuery实现的下雪动画效果示例【附源码下载】

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考,具体如下:

html部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- snow -->
<script src="js/jquery.snow.js"></script>
</head>
<body>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<img src="images/merry_christmasA.jpg" alt="chrismas">
</section>
</div>
</div>
<script>
$(document).ready( function(){
$.fn.snow( { minSize: 2, maxSize: 150, newOn: 200, flakeColor: '#FFFFFF' } );
});
</script>
</body>
</html>

jquery.snow.js:

/**
* jquery.snow - jQuery Snow Effect Plugin
*
* Available under MIT licence
*
* @version 1 (21. Jan 2012)
* @author Ivan Lazarevic
* @requires jQuery
* @see http://workshop.rs
*
* @params minSize - min size of snowflake, 10 by default
* @params maxSize - max size of snowflake, 20 by default
* @params newOn - frequency in ms of appearing of new snowflake, 500 by default
* @params flakeColor - color of snowflake, #FFFFFF by default
* @example $.fn.snow({ maxSize: 200, newOn: 1000 });
*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = { minSize : 10, maxSize : 20, newOn : 500, flakeColor : "#FFFFFF" },
options = $.extend({}, defaults, options);
//setInterval-setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
//开始一个周期-开始添加雪花
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css({ left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options.flakeColor}
)
.animate(//增加雪花动态效果{ top: endPositionTop, left: endPositionLeft, opacity: 0.2},durationFall,'linear',function() { $(this).remove()}
);
}, options.newOn);
//结束周期-停止添加雪花
setTimeout(function(){
window.clearInterval(interval);
},5000);
};
})(jQuery);

不需要css样式

主要用到:setInterval-setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。& animate动画

运行效果:

jQuery实现的下雪动画效果示例【附源码下载】

附:完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。


您可能感兴趣的文章:圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现JS+Canvas 实现下雨下雪效果javascript实现下雪效果【实例代码】下雪了 javascript实现雪花飞舞js特效,页面下雪的小例子jquery animate 动画效果使用说明jQuery动画效果animate和scrollTop结合使用实例jQuery实现图像旋转动画效果jQuery动画与特效详解Jquery中使用show()与hide()方法动画显示和隐藏图片

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryHTMLUB博客
tags: gt,lt,jQuery,jquery,snow,options,动画,function,script,div,maxSize,newOn,setInterval,Math
分页:12
转载请注明
本文标题:jQuery实现的下雪动画效果示例【附源码下载】
本站链接:http://www.codesec.net/view/572198.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(38)