创建一个小球

最新推荐文章于 2021-08-04 08:41:39 发布

weixin_52185647

最新推荐文章于 2021-08-04 08:41:39 发布

阅读量155

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_52185647/article/details/109467107

版权

随机生成小球的大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="../new.js"></script>
<script>
    $('body').css("margin", "0")
        //随机生成小球的大小
    var whp = (Math.floor(Math.random() * 10) + 1) * 10;
    //创建一个小球
    var ball = $("<div></div>").css({
            width: whp + "px",
            height: whp + "px",
            // backgroundColor: "red",
            borderRadius: "50%",
            position: "relative",
            backgroundImage: "url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603947043746&di=7031bae21950e6f1383a7c9140c36525&imgtype=0&src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201901%2F15%2F3b27e7bf0e.jpg)",
            backgroundSize: "100% 100%"
        })
        //将创建好的小球添加到body中
    $("body").append(ball);
    //获取浏览器窗口的宽高 计算小球移动的位置
    var h = $(window).innerHeight();
    h = h - whp;
    var w = $(window).innerWidth();
    w = w - whp;
    console.log(h, w)
    go();

    function go() {
        $('div').animate({
            left: w + "px",
            top: h + "px"
        }, 5000, function() {
            black();
        })
    }

    function black() {
        $('div').animate({
            left: 0,
            top: 0
        }, 5000, function() {
            go();
        })
    }
</script>

</html>