代码如下：

<script type="text/javascript" src="jquery.min.js"></script>

    <script src="jq.snow.js"></script>

    <!--下面是调用方法和参数说明-->

    <script>

    $(function(){

        $.fn.snow({

            minSize: ,        //雪花的最小尺寸

            maxSize: ,     //雪花的最大尺寸

            newOn:         //雪花出现的频率 这个数值越小雪花越多

        });

    });

    </script>

首先要引用Jquery库，到Jquery官网下载

jq.snow.js代码：

/**

 * js网页雪花效果jquery插件

 *

 *

 */

(function($){

    $.fn.snow = function(options){

            var $flake             = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),

                documentHeight     = $(document).height(),

                documentWidth    = $(document).width(),

                defaults        = {

                                    minSize        : ,        //雪花的最小尺寸

                                    maxSize        : ,        //雪花的最大尺寸

                                    newOn        : ,        //雪花出现的频率

                                    flakeColor    : "#267aba"    //雪花的颜色

                                },

                options            = $.extend({}, defaults, options);

            var interval        = setInterval( function(){

                var startPositionLeft     = Math.random() * documentWidth - ,

                     startOpacity        = 0.5 + Math.random(),

                    sizeFlake            = options.minSize + Math.random() * options.maxSize,

                    endPositionTop        = documentHeight - ,

                    endPositionLeft        = startPositionLeft -  + Math.random() * ,

                    durationFall        = documentHeight *  + Math.random() * ;

                $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);

    };

})(jQuery);

将这个引用到网站的页面上就可以了，如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>为网站增加js网页雪花效果jquery插件，特别适合圣诞/元旦/新年网站气氛 - 懒人建站</title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script src="jq.snow.js"></script>

    <!--下面是调用方法和参数说明-->

    <script>

    $(function(){

        $.fn.snow({

            minSize: ,        //雪花的最小尺寸

            maxSize: ,     //雪花的最大尺寸

            newOn:         //雪花出现的频率 这个数值越小雪花越多

        });

    });

    </script>

</head>

<body>

</body>

</html>

Jquery网站下雪花的效果的更多相关文章

  1. 个人网站html5雪花飘落代码JS特效下载

    如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...

  2. JQuery和ASP.NET分别实现级联下拉框效果

    在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...

  3. jQuery绿色下拉网站导航

    jQuery,下拉菜单,网站导航,绿色导航,菜单导航,jQuery绿色下拉网站导航是一款基于jquery实现的鼠标滑过下拉显示二级菜单. jquery特效代码:http://www.huiyi8.co ...

  4. 分析自定义view的实现过程-实现雪花飞舞效果（转载有改动）

    声明:本文源码出自实现雪花飞舞效果(有改动)主要通过这篇文来分析自定义view的实现过程. 没事时,比较喜欢上网看看一些新的东西,泡在网上的日子就是一个很不错的网站. 下面开始了,哈哈.^_^ 大家都 ...

  5. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  8. 【jquery插件】-网页下雪效果

        又到了年底,从圣诞节开始,可以发现各大网站的活动是越来越多,都变的银装素裹,本人由于业务需求也需要做这么一个效果,所以就通过google大神找了一下相关资源,结果就出现了N种雪花效果的方式.种 ...

  9. 使用jQuery创建模态窗口登陆效果

    日期:2013-8-22  来源:GBin1.com 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表 ...

随机推荐

  1. 在OS X中使用Homebrew

    Homebrew可以很方便的进行软件包管理,用官网的一句话来形容就是 Homebrew 使 OS X 更完整.用 gem 来安装您的 gems.用 brew 来搞定它们的依赖包. 安装Homebrew ...

  2. 修改Ubuntu12.04 左侧启动器Launcher图标大小，以及如何隐藏启动器？

    在 VirtualBox 中安装了 Ubuntu 12,一直使用 2D 桌面,3D桌面没用上,估计是电脑配置低的问题. 左边启动器的图标特别大,占据了很多的桌面空间,打算调小点.奇怪的是,在“系统设置 ...

  3. 优雅地使用Windows

    优雅地使用Windows 理财推荐:收益还行,安全性比余额宝高,只能自己的卡转进转出所以被盗也不怕,重要的是快速取现实时到账呢 1 现金宝 :点击进入现金宝 或者百度现金宝 2 百度理财 8.baid ...

  4. 学习ios(必看经典)牛人40天精通iOS开发的学习方法

    学习ios(必看经典)牛人40天精通iOS开发的学习方法 描述 这是一套从一个对iOS开发感兴趣的学员到iOS开发高手的系统.专业的课程体系.以培养企业开发真正需要的人才为目标,每个知识点都用案例来讲 ...

  5. Eclipse高级使用技巧

    1． Eclipse的配置文件导入和导出功能 说明:可以将Eclipse的自定义的工作空间配置文件导出和导入,这样创建多工作空间时候就省去了再设置的烦恼. 2． Eclipse设置显示行号 说明:设置 ...

  6. iOS开发——多线程篇——多线程介绍

    一.进程和线程1.什么是进程进程是指在系统中正在运行的一个应用程序每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开迅雷.Xcode,系统就会分别启动2个进程 通过“活动监 ...

  7. Unity手游之路<一>C#版本Protobuf

    http://blog.csdn.net/janeky/article/details/17104877 个游戏包含了各种数据,包括本地数据和与服务端通信的数据.今天我们来谈谈如何存储数据,以及客户端 ...

  8. 移动端rem切图

    1.为什么用rem 根据屏幕大小,自动调整大小 2.如何使用rem 分以下几步 a.用ps把设置稿弄成640px或者750px的(记得等比例缩放) b.调试时记得把浏览器默认最小字体设置为最小.手机端 ...

  9. (转)android中颜色矩阵colormatrix

    原文地址:http://www.cnblogs.com/menlsh/archive/2013/02/03/2890888.html 在Android中,对图像进行颜色方面的处理,如黑白老照片.泛黄旧 ...

  10. YUVviewerPlus使用教程

    1.YUVviewerPlus用于播放yuv文件,点击Open File打开yuv文件 2.点击Play播放yuv文件