收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width:100px;height:100px;background:pink;position:absolute;}
</style>
</head>
<body>
<!-- <div id="box" style="left:0px;top:0px;"></div> -->
<img src="./3.jpg" alt="" style="left:0px;top:0px;" id="box">
</body>
<script>
var box = document.getElementById('box');
var x = 10;
var y = 10;
setInterval(function(){
//控制div碰到橫向的邊界地方進(jìn)行反向移動(dòng)
if(parseInt(box.style.left)>= (window.innerWidth-100) ){
x = -x;
}
if(parseInt(box.style.left)<0){
x = -x;
}
//控制div碰到縱向的邊界的地方進(jìn)行反向移動(dòng)
if(parseInt(box.style.top)>= (window.innerHeight-100) ){
y = -y;
}
if(parseInt(box.style.top)<0){
y = -y;
}
//讓我們的div開始移動(dòng)
box.style.left = parseInt(box.style.left)+x+'px';
box.style.top = parseInt(box.style.top) +y+'px';
},100)
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)