代码如下：

<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. OC第二节 —— NSString和NSMutableString

    1.为什么需要NSString对象        答:在OC中创建字符串时,一般不使用C的方法,    因为C将字符串作为字符数组,所以在操作时会有很多不方便的地方,    在Cocoa中NSStri ...

  2. HTML5 video 视频标签 常用属性

    最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...

  3. windows 下wamp环境2 配置之mysql的安装

    安装配置mysql 5.7 打开mysql官网: https://www.mysql.com/ 点击downloads,然后选择commuity 选择MySQL Community Server选择对 ...

  4. 如何居中一个div?

    CSS 实现垂直居中的几种方案   说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友.但是微笑今天想聊的是 CSS 垂直居中 ...

  5. ini文件操作

    Config.ini 文件操作 [SYS] sysname=hy company=hyhy tel=2 using System; using System.Collections.Generic; ...

  6. iTool拷贝app到电脑上

    iTool拷贝app到电脑上 方法一. iTool找到你的app, 归档在桌面, 桌面就生成了ipa, 其实ipa是一个压缩包, 使用解压软件解压之后 生成Payload文件夹, 点开就可以看到Clo ...

  7. Android学习笔记（十五）——实战：强制下线

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 实现强制下线功能的思路也比较简单,只需要在界面上弹出一个对话框, 让用户无法进行任何其他操作, 必须要点击对话 ...

  8. [HDU3709]Balanced Number

    [HDU3709]Balanced Number 试题描述 A balanced number is a non-negative integer that can be balanced if a ...

  9. word20161129

    1. nested 英[nestɪd]美[nestɪd]adj. 嵌套的;v. 筑巢( nest的过去式和过去分词 );[例句]In the makeGrades method I use a cod ...

  10. cvGet2D的用法

    CvScalar s;s = cvGet2D(src, j,i);//获取src图像中坐标为(i,j)的像素点的值s.val[0] 代表src图像BGR中的B通道的值~int nXY = cvGet2 ...