JS模仿window屏保实现图片上下左右移动

最新推荐文章于 2023-10-12 11:05:04 发布

爱喝可乐的彬仔

最新推荐文章于 2023-10-12 11:05:04 发布

阅读量764

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_40999496/article/details/86702449

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML

<div class="upgradeContainer">
    <div class="upgradeImgContainer">
        <img src="~/Content/Base/imgs/upgrade.png" alt="" />
        <span class="deleteUpgrade">×</span>
    </div>
</div>

CSS

.upgradeContainer{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000000;
}
.upgradeImgContainer{
    width: 239px;
    height: 230px;
    position: absolute;
}
.deleteUpgrade{
    display: block;
    width: 22px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

<script>
        var directX = 1,//x轴的方向
            directY = 1,//y轴的方向
            imgX = 0,//x轴的距离
            imgY = 0,//y轴的距离
            bodyWidth = $(window).width(),
            bodyHeight = $(window).height(),
            imgdiv = $(".upgradeImgContainer"),
            timer = null;
        function imgMove() {
            imgX += directX;
            imgY += directY;
            //修改div的left top
            imgdiv.css("top", imgY+"px");
            imgdiv.css("left", imgX+"px");
            //判断X
            if (imgX + imgdiv.width() >= bodyWidth || imgX <= 0) {
                directX = -directX;
            }
            //判断Y
            if (imgY + imgdiv.height() >= bodyHeight || imgY <= 0) {
                directY = -directY;
            }
        }
        function move() {
            timer = setInterval(imgMove, 20);
        }
        move();
        imgdiv.mouseenter(function () {
            clearTimeout(timer);
        });
        imgdiv.mouseleave(function () {
            move();
        });
        $(".deleteUpgrade").click(function () {
            clearTimeout(timer);
            $(".upgradeContainer").css("display", "none");
        })
    </script>