代码如下：

<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. [Linux] Chang DNS Setting on Linux

    主机的虚拟机使用 NAT 模式时, NAT的DNS不好用.于是需要将虚拟机的DNS改成和主机的一样,这样虚拟机也可以请求互联网资源. Linux的DNS 服务器定义在 /etc/resolv.conf

  2. dwz 在dialog里打开dialog

    需要在打开dialog里再弹出一个dialog的话,需要在打开第一个dialog的地方指定rel,这样就可以弹出第二个dialog而不是替换掉第一个dialog <a class="a ...

  3. firefox， chrome常见插件

    firefox: firebug flagfox adblock autoproxy foxyproxy firegestures httpfox httprequester colorzilla j ...

  4. (:: operator)作用域限定符的几种使用

    一.(:: operator)解决局部变量与全局变量重名问题 ; int main() { ; cout<<var<<endl;//local variable cout< ...

  5. 【PHP面向对象(OOP)编程入门教程】16.__toString()方法

    我们前面说过在类里面声明“__”开始的方法名的方法(PHP给我们提供的),都是在某一时刻不同情况下自动调用执行的方 法,“__toString()”方法也是一样自动被调用的,是在直接输出对象引用时自动 ...

  6. JavaScript深入浅出1-数据类型

    慕课网教程视频地址:Javascript深入浅出 javascript是弱数据类型语言,不需要显式的定义类型,一共有如下六种数据类型 原始类型:number string boolean null u ...

  7. thinkphp save()方法没有数据，保存失败解决办法

    thinkphp save()方法没有数据保存返回0,保存失败返回false   可以对返回值判断一下就好 $ret = $model->save($data); //var_dump($ret ...

  8. __getattr__ 与动态属性

    直接上代码 >>> class Test(object): ... def __getattr__(self,attr_name): ... setattr(self, attr_n ...

  9. ubuntu彻底卸载mysql

    1.删除mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo apt ...

  10. SQL Server 2012 自动增长列，值跳跃问题

    介绍 从 SQL Server 2012 版本开始, 当SQL Server 实例重启之后,表格的自动增长列的值会发生跳跃,而具体的跳跃值的大小是根据增长列的数据类型而定的.如果数据类型是 整型(in ...