首页 > Web开发 > 详细

Jquery网站下雪花的效果

时间:2015-12-28 16:50:30      阅读:196      评论:0      收藏:0      [点我收藏+]

代码如下:

<script type="text/javascript" src="jquery.min.js"></script>
    
    <script src="jq.snow.js"></script>
    <!--下面是调用方法和参数说明-->
    <script>
    $(function(){
        $.fn.snow({ 
            minSize: 5,        //雪花的最小尺寸
            maxSize: 50,     //雪花的最大尺寸
            newOn: 300        //雪花出现的频率 这个数值越小雪花越多
        });
    });
    </script>


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

jq.snow.js代码:

/**
 * js网页雪花效果jquery插件 
 * 
 * 
 */
(function($){
    
    $.fn.snow = function(options){
    
            var $flake             = $(<div id="snowbox" />).css({position: absolute, top: -50px}).html(&#10052;),
                documentHeight     = $(document).height(),
                documentWidth    = $(document).width(),
                defaults        = {
                                    minSize        : 10,        //雪花的最小尺寸
                                    maxSize        : 20,        //雪花的最大尺寸
                                    newOn        : 1000,        //雪花出现的频率
                                    flakeColor    : "#267aba"    //雪花的颜色
                                },
                options            = $.extend({}, defaults, options);
            
            var interval        = setInterval( function(){
                var startPositionLeft     = Math.random() * documentWidth - 100,
                     startOpacity        = 0.5 + Math.random(),
                    sizeFlake            = options.minSize + Math.random() * options.maxSize,
                    endPositionTop        = documentHeight - 40,
                    endPositionLeft        = startPositionLeft - 100 + Math.random() * 500,
                    durationFall        = documentHeight * 10 + Math.random() * 5000;
                $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: 5,        //雪花的最小尺寸
            maxSize: 50,     //雪花的最大尺寸
            newOn: 300        //雪花出现的频率 这个数值越小雪花越多
        });
    });
    </script>
</head>
<body>
</body>
</html>

 

Jquery网站下雪花的效果

原文:http://www.cnblogs.com/LoveQin/p/5083041.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!