本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考,具体如下:
html部分:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”比;
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt; meta name=" viewport "
内容="宽度=设备宽度,初始=1.0,最小规模=0.5,最大范围=2.0,user-scalable=yes”/比;
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt; !——雪比;
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery.snow.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癱ontent-wrapper”比;
& lt; div类=澳谠赾learfix”比;
& lt; id=爸饕谌荨辈糠直?
& lt; img src=" https://www.yisu.com/zixun/images/merry_christmasA.jpg " alt="圣诞节"比;
& lt;/section>
& lt;/div>
& lt;/div>
& lt; script>
美元(文档)。准备好(函数(){
.fn美元。雪({newOn minSize: 2,最大容量:150:200年,flakeColor:“# FFFFFF”});
}）;
& lt;/script>
& lt;/body>
& lt;/html>
之前
jquery.snow.js:
/* *
* jquery。雪雪,jQuery插件
*
* MIT许可下可用
*
* @version 1 (21。2012年1月)
* @author伊凡Lazarevic
* @requires jQuery
* @see http://workshop.rs
*
* @params minSize - min雪花的大小,默认10
* @params最大容量- max雪花的大小,默认20
* @params newOn女士——频率出现的新的雪花,默认500
* @params flakeColor——雪花的颜色,默认# FFFFFF
* @example .fn美元。雪({最大容量:200,newOn: 1000});
*/(函数(美元){
.fn美元。雪=function(选项){
var片状美元=$ (' & lt; div id=捌础?祝辞”)。css({“位置”:“绝对”,“顶”:“-50 px”}) . html (' & # 10052; '),
documentHeight=$(文档).height (),
documentWidth=$(文档).width (),
缺省值={
minSize: 10,
最大尺寸:20,
newOn: 500,
flakeColor:“# FFFFFF”
}，
选项=$。扩展({},违约,选项);//setInterval-setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。//开始一个周期——开始添加雪花
var间隔=setInterval(函数(){
var startPositionLeft=math . random () * documentWidth - 100,
startOpacity=0.5 + math . random (),
sizeFlake=选项。* options.maxSize minSize + math . random (),
endPositionTop=documentHeight - 40岁
endPositionLeft=startPositionLeft - 100 + math . random () * 200,
durationFall=documentHeight * 10 + math . random () * 5000;
美元片
.clone ()
.appendTo(的身体)
. css (
{
左:startPositionLeft,
透明度:startOpacity,
“字体大小”:sizeFlake,
颜色:options.flakeColor
｝
）
.animate(//增加雪花动态效果
{
上图:endPositionTop,
左:endPositionLeft,
透明度:0.2
}，
durationFall,
“线性”,
函数(){
美元(这).remove ()
｝
）;
},options.newOn);//结束周期——停止添加雪花
setTimeout(函数(){
window.clearInterval(间隔);
},5000);
}；
}) (jQuery);
之前
不需要css样式
主要用到:<代码> setInterval-setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。amp;动画动画
运行效果:
jQuery实现的下雪动画效果示例【附源码下载】
