在网页中经常见到广告图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用html+css+js实现效果。图片自选。

最新推荐文章于 2022-06-30 15:36:22 发布

杼蛘

最新推荐文章于 2022-06-30 15:36:22 发布

阅读量2.1k

点赞数 4

分类专栏： js 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_45917176/article/details/121167089

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在网页中经常见到广告图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用html+css+js实现效果。图片自选。

<html>

<head>
    <meta charset="utf-8" />
    <title>图片随机浮动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: relative;
            width: 100vh;
            height: 100vh;
        }

        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./img/img.jpg" height="100" width="160">
    </div>
</body>

</html>
<script type="text/javascript">
    let img = document.querySelector('img')
    let x = 0, y = 0                                    // 元素离页面水平、垂直方向距离 
    let xflag = true, yflag = true                      // 设置水平、垂直标志位
    setInterval(() => {
        // 获取页面宽高
        let w = document.body.offsetWidth
        let h = document.body.offsetHeight

        // 判断图片碰壁的四种情况
        if (x == 0) xflag = true                        // 碰到左边
        if (y == 0) yflag = true                        // 碰到上边
        if (x == w - img.offsetWidth) xflag = false     // 碰到右边
        if (y == h - img.offsetHeight) yflag = false    // 碰到下边

        // 根据碰壁情况进行改变x和y的值
        // 方法一
        // if (xflag && yflag) x++, y++                    // 浮动方向：右下
        // if (xflag && !yflag) x++, y--                   // 浮动方向：右上
        // if (!xflag && yflag) x--, y++                   // 浮动方向：左下
        // if (!xflag && !yflag) x--, y--                  // 浮动方向：左上
        
		// 方法二
        xflag ? x++ : x--
        yflag ? y++ : y--

        // 设置图片的位置
        img.style.left = x + 'px'
        img.style.top = y + 'px'
        console.log(x, y);
    }, 10)
</script>

运行效果

在这里插入图片描述

杼蛘

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
在网页中经常见到广告图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用html+css+js实现效果。图片自选。

在网页中经常见到广告图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用html+css+js实现效果。图片自选。<html><head> <meta charset="utf-8" /> <title>图片随机浮动</title> <style type="text/css"> * { margin: 0; padding: 0;
复制链接

扫一扫