Jquery网站下雪花的效果

最新推荐文章于 2024-05-06 18:26:11 发布

weixin_30455365

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量73

点赞数

文章标签： javascript ViewUI

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

版权

代码如下：

<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>

转载于:https://www.cnblogs.com/LoveQin/p/5083041.html

weixin_30455365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery网站下雪花的效果

代码如下：<script type="text/javascript" src="jquery.min.js"></script> <script src="jq.snow.js"></script>  <script> $(fu...
复制链接

扫一扫