找回密码
当前位置：前端开发者 > 更多 > 正文

Web前端开发雪花效果插件

2018-12-19 分类：更多 阅读(863) 评论(0)
微信 前端 开发 zhihu
前端微信开发视频教程
前端开发微信小程序

’html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>雪花效果</title>
        <!– <link rel=”stylesheet” type=”text/css” href=”css/index.css”> –>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            html {
                height: 100%;
                overflow: hidden;
            }
            body {
                height: 100%;
                position: relative;
                background: url(‘http://www.zxhuan.com/wp-content/uploads/2016/07/snow.jpg’)
                    no-repeat;
            }
        </style>
    </head>
    <body>
        <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
        <script type=”text/javascript” src=”js/snow.js”></script>
        <script type=”text/javascript”>
            ;(function($, window, document, undefined) {
                $.fn.snowPlaying = function(option) {
                    this.default = {
                        snowType: ‘*’,
                    }
                    this.num = 0
                    this.options = $.extend({}, this.default, option)
                    this.playing = function() {
                        this.createSnow()
                    }
                    this.radomPosition = function() {
                        var $width = $(document).width()
                        var $position = Math.floor(Math.random() * 2000)
                        var $height = $(document).height()
                        if ($position < $width) {
                            return $position
                        }
                    }
                    this.createSnow = function() {
                        var timer = null
                        var $this = this
                        timer = setInterval(function() {
                            var snow = $(
                                ‘<span class=’ +
                                    ‘snow’ +
                                    $this.num +
                                    ‘>’ +
                                    $this.default.snowType +
                                    ‘</span>’,
                            )
                            $(‘body’).append(snow)
                            var $size = $this.radomSize()
                            $this.radomCss(snow, $size)
                            $this.animates(snow, $size)
                        }, 80)
                    }
                    this.radomCss = function(obj, size) {
                        var $this = this
                        return obj.css({
                            color: ‘white’,
                            ‘font-size’: size + ‘px’,
                            position: ‘absolute’,
                            top: ‘-50px’,
                            left: this.radomPosition() + ‘px’,
                        })
                    }
                    this.radomSize = function() {
                        return Math.floor(Math.random() * 15 + 10)
                    }
                    this.animates = function(ele, size) {
                        var $height = $(document).height() – size
                        var $this = this
                        ele.animate(
                            {
                                top: $height + ‘px’,
                            },
                            5000,
                            function() {
                                ele.remove()
                            },
                        )
                    }
                    return this.playing()
                }
            })(jquery, window, document)
            $(document).snowPlaying()
        </script>
    </body>
</html>
前端微信公众号开发教程
微信公众众号需要前端开发吗
微信前端页面开发
赞(0)
前端开发者 » Web前端开发雪花效果插件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论