js 实现网页屏幕可视区域内的碰撞移动

最新推荐文章于 2022-11-30 11:07:55 发布

漆黑的莫莫

最新推荐文章于 2022-11-30 11:07:55 发布

阅读量504

点赞数

文章标签： javascript ide 前端

本文链接：https://blog.csdn.net/qq_45831414/article/details/121103550

版权

放在body内的html代码

<div id="photo" style="position: fixed; z-index: 11;">
	<img src="img/图标/To_be_continued.png">
</div>

放在body内最后一行的html代码

<script type="text/javascript" src="js/crash.js"></script>

可以直接粘贴在.js文件中的js代码

var photo = document.getElementById("photo");
var h = document.getElementById("photo").clientHeight;
var w = document.getElementById("photo").clientWidth;
var x = 0, y = 0;
var iDeltaX = 1, iDeltaY = 1, iTmp;
function PhotoMove() {
    if (x > window.innerWidth - w || x < 0) {
        iDeltaX *= -1;
    }
    if (y > window.innerHeight - h || y < 0) {
        iDeltaY *= -1;
    }
    x += iDeltaX;
    y += iDeltaY;
    photo.style.left = x + 'px';
    photo.style.top = y + 'px';
    setTimeout("PhotoMove()", 7);
}
PhotoMove();