给网站添加飘下雪花效果的代码

有时为了给网站访客营造一种特殊节日气氛,添加下雪飘雪花的效果是一种不错的选择。为此我在网上找了不少代码并试验,最终选取两种自己比较满意的分享给大家。

如果你使用的如 chrome 和火狐等浏览器支持开发者工具,可以复制粘贴在控制台 console 里面回车即可查看效果了。(记得去掉 script 标签)

网站飘雪花效果

雪花效果展示

雪花代码的使用方法:

①、你可以直接复制下面的代码到网页的 head 或 foot 中,但为了网页打开速度还是放在底部粘贴到</body>前就好;

②、如果你闲代码过长可以去掉下面代码前后的 script 标签另存为 websnow.js 文件,再在网页头部或尾部引用即可。例如:

  1. <script type='text/javascript' src='http://www.jianlove.com/websnow.js'></script>

如果不起作用,请确认你的网站原本是否已引用 JQurey 库,还没有就需要在添加的代码前引用 JQurey。

代码展示:

  1. <script type="text/javascript">
  2. (function($){
  3. $.fn.snow = function(options){
  4. var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
  5. documentHeight = $(document).height(),
  6. documentWidth = $(document).width(),
  7. defaults = {
  8. minSize : 10,
  9. maxSize : 20,
  10. newOn : 1000,
  11. flakeColor : "#AFDAEF" /* 自定义雪花颜色,默认是浅蓝色 */
  12. },
  13. options = $.extend({}, defaults, options);
  14. var interval= setInterval( function(){
  15. var startPositionLeft = Math.random() * documentWidth - 100,
  16. startOpacity = 0.5 + Math.random(),
  17. sizeFlake = options.minSize + Math.random() * options.maxSize,
  18. endPositionTop = documentHeight - 200,
  19. endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  20. durationFall = documentHeight * 10 + Math.random() * 5000;
  21. $flake.clone().appendTo('body').css({
  22. left: startPositionLeft,
  23. opacity: startOpacity,
  24. 'font-size': sizeFlake,
  25. color: options.flakeColor
  26. }).animate({
  27. top: endPositionTop,
  28. left: endPositionLeft,
  29. opacity: 0.2
  30. },durationFall,'linear',function(){
  31. $(this).remove()
  32. });
  33. }, options.newOn);
  34. };
  35. })(jQuery);
  36. $(function(){
  37. $.fn.snow({
  38. minSize: 5, /* 雪花最小尺寸 */
  39. maxSize: 50,/* 雪花最大尺寸 */
  40. newOn: 300 /* 雪花密集程度,数字越小越密集 */
  41. });
  42. });
  43. </script>

还有一种代码因篇幅稍长,准备另起一篇文章并附代码说明;这篇文章的雪花效果是棱角分明的样式,默认颜色适合浅色系背景的网站;而下篇文章的雪花效果是类似小棉花团的样式,默认颜色适合深色系背景的网站。

另一种雪花效果代码查看:冬季圣诞节给网站添加飘雪花效果的代码

 

转载请注明链接地址:荐爱小站 » 给网站添加飘下雪花效果的代码

赞 (4) 赏 !

觉得文章有用就打赏一下吧,赠人玫瑰手有余香!

支付宝扫一扫打赏

微信扫一扫打赏