代码如下：

<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. [Storm] java.io.FileNotFoundException: File '../stormconf.ser' does not exist

    This bug will kill supervisors Affects Version/s: 0.9.2-incubating, 0.9.3, 0.9.4 Fix Version/s: 0.10 ...

  2. ubutu之jdk安装

    1.jdk下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.解压jdk- ...

  3. jQuery中添加自定义或函数方法

    <script type="text/javascript"> (function () { $.fn.parHy = function (val) { alert(v ...

  4. XML文件数据操作

    #region XML序列化文件和反序列化 /// <summary> /// 通用类的保存函数,可以将已经声明过可序列化的类以文件方式保存起来. /// 保存格式分为 XML明文式和 二 ...

  5. java中重载与重写的区别

    (1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 重载Overloading是一个类中多态性的一种表现. 然后我们再来谈谈 重写(Over ...

  6. Java 7 Concurrency Cookbook 翻译 序言

    在日常的Java代码开发过程中,很难免地有对多线程的需求,掌握java多线程和并发的机制也是Java程序员写出更健壮和高效代码的基础.笔者找寻国内已出版的关于Java多线程和并发的的中文书籍和翻译书籍 ...

  7. python 函数的文档字符串 docstrings

    函数体的第一行可以是一个可选的字符串文本:此字符串是该函数的文档字符串,或称为docstring.(更多关于 docstrings 的内容可以在 文档字符串一节中找到.)有工具使用 docstring ...

  8. JDIC 访问Web时NullPointerException

    Exception in thread "EventThread" java.lang.NullPointerException            at org.jdeskto ...

  9. BZOJ 3111: [Zjoi2013]蚂蚁寻路

    Sol DP. 首先观察转折,画画图,看看移动路线,可以非常轻易的发现如果走到起点的下方是回不去的.. 然后它就相当于一个底部是平的,顶部凹凹凸凸的形状,每右转两次或左转两次就会形成小矩阵,这样就可以 ...

  10. java对txt文件内容追加

    package com.test; import java.io.FileOutputStream; /** * 对txt文件在文本追加内容 * @author Wdnncey * */ public ...