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

前端之家收集整理的这篇文章主要介绍了jQuery实现的下雪动画效果示例【附源码下载】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

html部分:

jquery.snow.js:

').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程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/33889.html

猜你在找的jQuery相关文章