图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用html+css+js实现效果。图片自选。"/>
在网页中经常见到广告图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用html+css+js实现效果。图片自选。
在网页中经常见到广告图片在页面中自由浮动，碰到浏览器边界会反弹回来，请使用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.offsetWidthlet 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>
运行效果
更多推荐
在网页中经常见到广告图片在页面中自由浮动,碰到浏览器边界会反弹回来,请使用html+css+js实现效果。图片自选。
发布评论