当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 前端开发实例(一款雪花掉落的特效)

前端开发实例(一款雪花掉落的特效)

2020年07月07日  | 移动技术网IT编程  | 我要评论
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../demo1/js/jquery.min.js" &...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        // 需要自己引入jquery.min.js
        <script type="text/javascript" src="../demo1/js/jquery.min.js" ></script>
        <style>
            *{margin: 0;padding: 0;}
            body{font-family: "微软雅黑";font-size: 14px;background: black;}
            #snow{position: relative;width: 100%;height: 100%;}
            .snow1{position: fixed;top: -50px;color: white;}
            body{ cursor: url(logoNegertive.jpg),auto;}
        </style>
    </head>
    <body>
        <div id="snow">
            
        </div>
        <script>
            $(function(){
                var minsize = 5;
                var maxsize = 30;
                var minspeed = 5000;
                var maxspeed = 10000;
                var windowheight = $(window).height();
                var windowwidth = $(window).width();
                setInterval(function(){
                    var clarity = 0.5+Math.random()*(1-0.5);
                    var sleft = Math.round(0+Math.random() * (windowwidth-0+1))
                    var size = Math.round(minsize+Math.random() * (maxsize-minsize+1))
                    // ❉ 可以更换成直接喜欢的图标
                    var snow = '<div class="snow1" style="left:'+sleft+'px;font-size:'+size+'px;opacity:'+clarity+';">❉</div>';
                    var speed = Math.round(minspeed+Math.random() * (maxspeed-minspeed+1))
                    console.log(clarity)
                    var endleft= sleft - 100 + Math.random() * 500;
                    $(snow).appendTo($("#snow")).animate({
                        top:windowheight + "px",
                        left:endleft+ "px"
                    },speed,function(){
                        $(this).remove()
                    })
                },600)
            })
        </script>
    </body>
</html>

本文地址:https://blog.csdn.net/qq_36598097/article/details/105240230

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网