这篇文章主要介绍了jquery实现的下雪动画效果,涉及jquery插件结合setinterval、animate进行动画操作的相关使用技巧,并附带源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了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> <p id="content-wrapper"> <p class="inner clearfix"> <section id="main-content"> <img src="images/merry_christmasa.jpg" alt="chrismas"> </section> </p> </p> <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 = $('<p 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动画
运行效果：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在webpack中如何使用echarts？
javascript中object基础内部方法图（图文教程）
使用axios封装fetch方法和调用
以上就是在jquery中如何实现下雪动画效果的详细内容。