使用javascript实现的雪花飞舞的效果
2013-12-31 14:34
701 查看
原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除,于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位.
效果演示:点击这里
效果演示:点击这里
<p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script charset="utf-8" type="text/javascript">// <![CDATA[ (function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({ 'position': 'fixed', 'top': '-50px', 'border-radius': '8px','background':'#fff'}), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 1, //雪花的最小尺寸 maxSize : 10, //雪花的最大尺寸 newOn : 100, //雪花出现的频率 flakeColor : "#FFFFFF" }, options = $.extend({}, defaults, options); 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() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, height: sizeFlake, width:sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,'linear',function(){ $(this).remove() } ); }, options.newOn); }; })(jQuery); // ]]></script> </p> <!--下面是调用方法和参数说明--> <p> <script type="text/javascript">// <![CDATA[ $(function(){ $.fn.snow({ minSize: 1, //雪花的最小尺寸 maxSize:8, //雪花的最大尺寸 newOn: 100 //雪花出现的频率 这个数值越小雪花越多 }); }); // ]]></script> </p>
相关文章推荐
- 使用javascript实现雪花飘落的效果
- 使用javascript实现雪花飘落的效果
- 使用js实现雪花飘落效果
- CSS实现透明效果通用方案以及使用javascript或jquery改变透明度
- 使用JavaScript实现新闻滚动效果
- 使用javascript实现拖拽效果
- 使用纯javascript实现放大镜效果
- JavaScript使用FileReader实现图片上传预览效果
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- 使用JavaScript实现回到顶部效果
- 分析自定义view的实现过程-实现雪花飞舞效果
- 使用html5+css3来实现slider切换效果告别javascript+css
- 下雪了 javascript实现雪花飞舞
- JavaScript提高:002:ASP.NET使用easy UI实现tab效果
- Javascript实现多彩雪花从天降散落效果的方法
- 使用JavaScript实现连续滚动字幕效果的方法
- JavaScript实现渐变色效果(不使用图片)
- 使用javascript实现某网站的头部广告向上切换效果
- 实现雪花飞舞效果
- Rainyday.js – 使用 JavaScript 实现雨滴效果