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

前端Jq实现从天而降钞票雨

2018-11-26 分类：jQuery 阅读(1506) 评论(0)
百度地图 前端开发
前端开发网课百度云
百度前端开发规范

用jq写的一个钞票从天而下的效果，其中钞票产生时距离浏览器的左边距是随机，下降速度是随机的，下落的方向是随机的，透明度是随机的。数量的多少可以控制计时器循环的时间来改变多少。图片自己可以改成别的，比如表情，刀等等。祝大家玩的开心！欢迎批评交流！！！

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title>标题</title>
        <meta name=”keywords” content=”” />
        <meta name=”description” content=”” />
        <style>
            body,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            div,
            p,
            dl,
            dt,
            dd,
            ol,
            ul,
            li,
            form,
            table,
            th,
            td,
            a,
            img,
            span,
            strong,
            var,
            em,
            input,
            textarea,
            select,
            option {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                font-family: ‘微软雅黑’, ‘宋体’, Arail, Tabhoma;
                font-size: 12px;
                text-align: left;
            }
            ul,
            ol {
                list-style: none;
            }
            img {
                border: 0;
            }
            input,
            select,
            textarea {
                outline: 0;
            }
            textarea {
                resize: none;
                overflow: auto;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            th,
            strong,
            var,
            em {
                font-weight: normal;
                font-style: normal;
            }
            a {
                text-decoration: none;
            }
            body {
                background: black;
            }
        </style>
    </head>
    <body></body>
    <script src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js”></script>
    <script>
        var min = 5
        var max = 50
        var newone = 100
        var xue = $(‘<div></div>’)
            .css({
                position: ‘absolute’,
                top: ‘-50px’,
            })
            .html(
                “<img src=’http://img.hibor.com.cn/sinaImg/U11470P31DT20150810091147.jpg’ style=’width:100px;’></img>”,
            )
        $(function() {
            var he = $(document).height() – 10
            var wid = $(document).width()
            setInterval(function() {
                var startl = Math.random() * wid //随机初始位置
                var op = 0.8 + Math.random() * 0.2 //随机初始透明度
                var end = he
                var endl = Math.random() * wid //随机结束位置
                var speed = 5000 + Math.random() * 3000
                var si = min + Math.random() * max
                xue.clone()
                    .appendTo(‘body’) //插入网页
                    .css({
                        left: startl,
                        opacity: op,
                        ‘font-size’: si,
                        color: ‘white’,
                    })
                    .animate(
                        {
                            top: end,
                            left: endl,
                            opacity: ‘0.5’,
                        },
                        speed,
                        function() {
                            //回调函数，清除到底的div
                            $(this).remove()
                        },
                    )
            }, newone)
        })
    </script>
</html>
黑马前端开发百度云
百度fex前端开发的前端组件
web前端开发课程百度云
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论