代码如下：

<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. iOS: ARC & MRC下string内存管理策略探究

    ARC & MRC下string内存管理策略探究 前两天跟同事争论一个关于NSString执行copy操作以后是否会发生变化,两个人整了半天,最后写代码验证了一下,发现原来NSString操作 ...

  2. UI第一节—— UILable

    1.首先说说怎么创建UI程序,打开xcode,选择Create  a new Xcode project.看如下截图 2,接下来就蹦出一个和写OC应用差不多的界面,不多解释了 3.我给工程取得名字就叫 ...

  3. CF #305 (Div. 2) C. Mike and Frog(扩展欧几里得&&当然暴力is also no problem）

    C. Mike and Frog time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. 【PHP面向对象(OOP)编程入门教程】7.特殊的引用”$this“的使用

    现在我们知道了如何访问对象中的成员,是通过”对象->成员”的方式访问的,这是在对象的外部去访问对象中成员的形式, 那么如果我想在对象的内部,让对象里的方法访问本对象的属性, 或是对象中的方法去调 ...

  5. Mac Pro 软件收藏

    记录下Pro Mac中安装过的软件: 编号 软件名 功能说明 1 QQ   2 微信   3 搜狗输入法   4 Chrome 浏览器  Chrome 及其 插件“个性化设置”备份 5 360云盘   ...

  6. js时间格式化（yy年MM月dd日 hh:mm）

    //时间格式化 Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, / ...

  7. MyEclipse 2013优化配置【转】

    作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs MyEclipse 2013优化速度方案仍然主要有这么几个方面:去除无需加载的模块.取消冗余的配置.去除不 ...

  8. 在linux终端执行clear或top命令时出现：'xterm' unknown terminal type的错误

    例如: [root@localhost phpmyadmin]# clear 'xterm': unknown terminal type. 解决办法: 1.临时办法,下次启动失效,需要重新执行 ex ...

  9. 160809212田京诚C语言程序设计实验2 选择结构程序设计_进阶

    实验2-6 猜数字游戏 实验要求: 编写一个C程序实现一个[1-100]以内的猜数字游戏. (1)       系统随机产生一个[1-100]之间的随机数. (2)       输入任意一个数字.数字 ...

  10. 如何将代码托管到GitHub上

    注册账号什么的直接省略吧...GitHub传送门:https://github.com/ 首先就是创建repository. 接着就是填写相关的信息了 点击Create repository,创建成功 ...